πŸ“Έ flutter_image_picker_ui

A modern and customizable image picker UI for Flutter, built on top of the popular image_picker plugin.

This widget provides a clean, user-friendly interface for selecting images from the camera or gallery β€” with support for previews, icons, and styling options.


πŸ“Έ Screenshot

Preview

✨ Features

  • Pick image from camera or gallery
  • Show image preview with clear (X) button
  • Fully customizable styles, icons, and text
  • Dotted border with optional icon or title
  • Designed to be developer-friendly

πŸš€ Installation

Add this to your pubspec.yaml:

dependencies:
  flutter_image_picker_ui: 1.0.0 # or use the latest version

Setup Requirement

⚠️ This package uses the image_picker plugin under the hood. Make sure to follow its official native configuration guide for Android and iOS setup before using this widget.

Run:

flutter pub get

πŸ§ͺ Example Usage (Default)

PhotoUploadWidget(
  onImagePicked: (File? image) {
    if (image != null) {
      print("Image picked: \${image.path}");
    } else {
      print("Image cleared");
    }
  },
)

You can optionally customize the button text styles, icons, and paddings through the default constructor.


🎨 Fully Custom Widget Example

PhotoUploadWidget.custom(
  onImagePicked: (File? image) {},

  icon: Container(
    padding: const EdgeInsets.all(12),
    decoration: BoxDecoration(
      shape: BoxShape.rectangle,
      color: Colors.blueGrey[50],
      borderRadius: const BorderRadius.all(Radius.circular(8)),
    ),
    child: const Icon(
      Icons.add_a_photo_outlined,
      size: 32,
      color: Colors.blueGrey,
    ),
  ),

  title: 'Upload your profile photo',
  titleStyle: const TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.bold,
    color: Colors.black,
  ),

  subtitle: 'PNG or JPG, up to 5MB',
  subtitleStyle: const TextStyle(
    fontSize: 14,
    color: Colors.grey,
  ),

  padding: const EdgeInsets.all(24),

  cameraBtnDecoration: ElevatedButton.styleFrom(
    backgroundColor: Colors.green.shade700,
    foregroundColor: Colors.white,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),

  galleryBtnDecoration: OutlinedButton.styleFrom(
    foregroundColor: Colors.green.shade700,
    side: BorderSide(
      color: Colors.green.shade700,
      width: 2,
    ),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),

  cameraIcon: const Icon(Icons.photo_camera, size: 20),
  galleryIcon: const Icon(Icons.photo_library, size: 20),
);

πŸ“š API Overview

Prop Type Description
onImagePicked Function(File?) Called with image or null on clear
title / subtitle String Shown above the button
cameraBtnDecoration ButtonStyle Style for camera button
galleryBtnDecoration ButtonStyle Style for gallery button
cameraIcon Widget? Optional camera button icon
galleryIcon Widget? Optional gallery button icon
icon Widget? Optional top icon
padding EdgeInsetsGeometry Padding around content

πŸ“€ Clear Button Behavior

When an image is selected, a small X button appears in the top-right corner. Clicking it:

  • Clears the preview
  • Calls the onImagePicked(null) callback

πŸ“„ License

MIT Β© Abdullah Al Mamun


πŸ‘₯ Maintainer


Made with ❀️ using Flutter.