multi_image_picker_view 0.0.16 copy "multi_image_picker_view: ^0.0.16" to clipboard
multi_image_picker_view: ^0.0.16 copied to clipboard

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/

preview

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 #

custom

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 #

shubhamgupta16

Contributors #

Contributing #

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

96
likes
0
pub points
93%
popularity

Publisher

unverified uploader

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.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

file_picker, flutter, flutter_reorderable_grid_view

More

Packages that depend on multi_image_picker_view