multi_image_picker_view 0.0.1 multi_image_picker_view: ^0.0.1 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.
Features #
- Pick multiple images
- Displayed in GridView
- Reorder picked images just by dragging
- Remove picked image
- Limit max images
- Limit image extenstions
- 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'],
);
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
},
gridDelegate: /* Your SliverGridDelegate */,
dragChildBoxDecoration: /* 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 contoller 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.reOrderImage(oldIndex, newIndex); // reorder the image
Custom Look #
Contributing #
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.