multi_image_picker_view 0.0.13

A complete widget which can easily pick multiple images from device and display them in UI. Also picked image can be re-ordered and removed easily.

Multi Image Picker View Flutter

A complete widget which can easily pick multiple images from device and display them in UI. Also picked image can be re-ordered and removed easily.

🚀 LIVE DEMO OF EXAMPLE PROJECT: https://shubham-gupta-16.github.io/multi_image_picker_view/

Features

• Pick multiple images
• Displayed in GridView
• Reorder picked images just by dragging
• Remove picked image
• Limit max images
• Limit image extensions
• Fully customizable UI

Getting started

flutter pub add multi_image_picker_view

Usage

Define the controller

final controller = MultiImagePickerController();

OR

final controller = MultiImagePickerController(
  maxImages: 15,
  allowedImageTypes: ['png', 'jpg', 'jpeg'],
  images: <ImageFile>[] // array of pre/default selected images
);

UI Implementation

MultiImagePickerView(
  controller: controller,
  padding: const EdgeInsets.all(10),
);

OR

MultiImagePickerView(
  controller: controller,
  initialContainerBuilder: (context, pickerCallback) {
    // return custom initial widget which should call the pickerCallback when user clicks on it
  },
  itemBuilder: (context, image, removeCallback) {
    // return custom card for image and remove button which also calls removeCallback on click
  },
  addMoreBuilder: (context, pickerCallback) {
    // return custom card or item widget which should call the pickerCallback when user clicks on it
  },
  addButtonTitle: /* Default title for AddButton */,
  addMoreButtonTitle: /* Default title for AddMoreButton */,
  gridDelegate: /* Your SliverGridDelegate */,
  draggable: /* true or false, images can be reorderd by dragging by user or not, default true */,
  onDragBoxDecoration: /* BoxDecoration when item is dragging */,
  onChange: (images) {
    // callback to update images
  },
);

Get Picked Images

Picked Images can be get from controller.

final images = controller.images; // return Iterable<ImageFile>
for (final image in images) {
  if (image.hasPath)
    request.addFile(File(image.path!));
  else 
    request.addFile(File.fromRawPath(image.bytes!));
}
request.send();

Also controller can perform more actions.

controller.pickImages();
controller.hasNoImages; // return bool
controller.maxImages; // return maxImages
controller.allowedImageTypes; // return allowedImageTypes
controller.removeImage(imageFile); // remove image from the images
controller.clearImages(); // remove all images (clear selection)
controller.reOrderImage(oldIndex, newIndex); // reorder the image

Custom Look

My other flutter packages

• view_model_x - An Android similar state management package (StateFlow and SharedFlow with ViewModel) which helps to implement MVVM pattern easily.

Support

Contributors

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.