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'],
  withData: true,
  withReadStream: true,
  images: <ImageFile>[] // array of pre/default selected images
);

Note: by setting withData to true, the ImageFile will contains bytes. It is always true for web. However, have in mind that enabling this on IO (iOS & Android) may result in out of memory issues if you allow multiple picks or pick huge files. Use withReadStream instead.

...

Note: by setting withReadStream to true, the ImageFile will contains readStream of type Stream<List<int>>. It is always false for web.

UI Implementation

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

OR

MultiImagePickerView(
  controller: controller,
  draggable: /* true or false, images can be reorderd by dragging by user or not, default true */,
  showAddMoreButton: /* true or false, default is true */,
  showInitialContainer: /* true or false, default is true */,
  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 */,
  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.addImage(imageFile) // add ImageFile to images
controller.removeImage(imageFile) // remove ImageFile from the images
controller.clearImages() // remove all images (clear selection)
controller.reOrderImage(oldIndex, newIndex) // reorder the image

ImageFile class

The ImageFile class holds the selected image. It contains name, extension, bytes?, readStream?, and path?. path is always null for web. And by default bytes is null for IO (Android and IOS). To get the bytes on IO devices, set withData to true in MultiImagePickerController. However, have in mind that enabling this on IO (iOS & Android) may result in out of memory issues if you allow multiple picks or pick huge files. Use withReadStream instead.

The readStream is always null for web. And by default readStream is null for IO (Android and IOS). To get the readStream on IO devices, set withReadStream to true in MultiImagePickerController

Note: For Web Platform, ImageFile contains bytes and it can't be null.

ImageFileView widget

This widget helps to display image which is stored in ImageFile. This is a replacement for Image.network or Image.memory widget. With this widget, it can be easy to show image just by passing the ImageFile object.

ImageFileView(
  file: imageFileObject,
  fit: BoxFit.cover
)

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.