improvements

Author: ahmednfwela

lib/src/form_builder_image_picker.dart

@@ -56,6 +56,7 @@ class FormBuilderImagePicker extends FormBuilderField<List<dynamic>> {
   final Widget cameraLabel;
   final Widget galleryLabel;
   final EdgeInsets bottomSheetPadding;
+  final bool preventPop;
 
   /// fit for each image
   final BoxFit fit;
@@ -76,6 +77,7 @@ class FormBuilderImagePicker extends FormBuilderField<List<dynamic>> {
     FocusNode? focusNode,
     WidgetBuilder? loadingWidget,
     this.fit = BoxFit.cover,
+    this.preventPop = false,
     this.displayCustomType,
     this.previewWidth = 130,
     this.previewHeight = 130,
@@ -142,6 +144,7 @@ class FormBuilderImagePicker extends FormBuilderField<List<dynamic>> {
                         'Consider using displayCustomType to handle the type: ${displayItem.runtimeType}',
                       );
                       return Stack(
+                        key: ObjectKey(item),
                         alignment: Alignment.topRight,
                         children: <Widget>[
                           Container(
@@ -193,6 +196,7 @@ class FormBuilderImagePicker extends FormBuilderField<List<dynamic>> {
                       );
                     } else {
                       return GestureDetector(
+                        key: UniqueKey(),
                         child: placeholderImage != null
                             ? Image(
                                 width: previewWidth,
@@ -212,13 +216,18 @@ class FormBuilderImagePicker extends FormBuilderField<List<dynamic>> {
                                         ? iconColor ?? primaryColor
                                         : disabledColor)
                                     .withAlpha(50)),
-                        onTap: () {
-                          showModalBottomSheet<void>(
+                        onTap: () async {
+                          final remainingImages = maxImages == null
+                              ? null
+                              : maxImages - value.length;
+                          await showModalBottomSheet<void>(
                             context: state.context,
                             builder: (_) {
                               return ImageSourceBottomSheet(
                                 maxHeight: maxHeight,
                                 maxWidth: maxWidth,
+                                preventPop: preventPop,
+                                remainingImages: remainingImages,
                                 imageQuality: imageQuality,
                                 preferredCameraDevice: preferredCameraDevice,
                                 bottomSheetPadding: bottomSheetPadding,
@@ -228,12 +237,28 @@ class FormBuilderImagePicker extends FormBuilderField<List<dynamic>> {
                                 galleryLabel: galleryLabel,
                                 onImageSelected: (image) {
                                   state.requestFocus();
-                                  field.didChange(value.toList()..add(image));
+                                  field.didChange([...value, ...image]);
                                   Navigator.pop(state.context);
                                 },
                               );
                             },
                           );
+                          // if (remainingImages == 1) {
+                          // } else {
+                          //   final imagePicker = ImagePicker();
+                          //   final picked = await imagePicker.pickMultiImage(
+                          //     maxHeight: maxHeight,
+                          //     maxWidth: maxWidth,
+                          //     imageQuality: imageQuality,
+                          //   );
+                          //   if (picked != null) {
+                          //     state.requestFocus();
+                          //     final actualPicked = remainingImages == null
+                          //         ? picked
+                          //         : picked.take(remainingImages);
+                          //     field.didChange([...value, ...actualPicked]);
+                          //   }
+                          // }
                         },
                       );
                     }

lib/src/image_source_sheet.dart

@@ -14,23 +14,28 @@ class ImageSourceBottomSheet extends StatefulWidget {
   /// image with the original quality will be returned.
   final int? imageQuality;
 
+  final int? remainingImages;
+
   /// Use preferredCameraDevice to specify the camera to use when the source is
   /// `ImageSource.camera`. The preferredCameraDevice is ignored when source is
   /// `ImageSource.gallery`. It is also ignored if the chosen camera is not
   /// supported on the device. Defaults to `CameraDevice.rear`.
   final CameraDevice preferredCameraDevice;
 
   /// Callback when an image is selected.
-  final void Function(XFile) onImageSelected;
+  final void Function(Iterable<XFile> files) onImageSelected;
 
   final Widget? cameraIcon;
   final Widget? galleryIcon;
   final Widget? cameraLabel;
   final Widget? galleryLabel;
   final EdgeInsets? bottomSheetPadding;
+  final bool preventPop;
 
   ImageSourceBottomSheet({
     Key? key,
+    this.remainingImages,
+    this.preventPop = false,
     this.maxHeight,
     this.maxWidth,
     this.imageQuality,
@@ -54,40 +59,61 @@ class _ImageSourceBottomSheetState extends State<ImageSourceBottomSheet> {
     if (_isPickingImage) return;
     _isPickingImage = true;
     final imagePicker = ImagePicker();
-    final pickedFile = await imagePicker.pickImage(
-      source: source,
-      maxHeight: widget.maxHeight,
-      maxWidth: widget.maxWidth,
-      imageQuality: widget.imageQuality,
-      preferredCameraDevice: widget.preferredCameraDevice,
-    );
-    _isPickingImage = false;
-    if (pickedFile != null) {
-      widget.onImageSelected(pickedFile);
+    try {
+      if (source == ImageSource.camera || widget.remainingImages == 1) {
+        final pickedFile = await imagePicker.pickImage(
+          source: source,
+          preferredCameraDevice: widget.preferredCameraDevice,
+          maxHeight: widget.maxHeight,
+          maxWidth: widget.maxWidth,
+          imageQuality: widget.imageQuality,
+        );
+        _isPickingImage = false;
+        if (pickedFile != null) {
+          widget.onImageSelected([pickedFile]);
+        }
+      } else {
+        final pickedFiles = await imagePicker.pickMultiImage(
+          maxHeight: widget.maxHeight,
+          maxWidth: widget.maxWidth,
+          imageQuality: widget.imageQuality,
+        );
+        _isPickingImage = false;
+        if (pickedFiles != null && pickedFiles.length > 0) {
+          widget.onImageSelected(pickedFiles);
+        }
+      }
+    } catch (e) {
+      _isPickingImage = false;
+      rethrow;
     }
   }
 
   @override
   Widget build(BuildContext context) {
-    return WillPopScope(
-      onWillPop: () async => !_isPickingImage,
-      child: Container(
-        padding: widget.bottomSheetPadding,
-        child: Wrap(
-          children: <Widget>[
-            ListTile(
-              leading: widget.cameraIcon,
-              title: widget.cameraLabel,
-              onTap: () => _onPickImage(ImageSource.camera),
-            ),
-            ListTile(
-              leading: widget.galleryIcon,
-              title: widget.galleryLabel,
-              onTap: () => _onPickImage(ImageSource.gallery),
-            ),
-          ],
-        ),
+    Widget res = Container(
+      padding: widget.bottomSheetPadding,
+      child: Wrap(
+        children: <Widget>[
+          ListTile(
+            leading: widget.cameraIcon,
+            title: widget.cameraLabel,
+            onTap: () => _onPickImage(ImageSource.camera),
+          ),
+          ListTile(
+            leading: widget.galleryIcon,
+            title: widget.galleryLabel,
+            onTap: () => _onPickImage(ImageSource.gallery),
+          ),
+        ],
       ),
     );
+    if (widget.preventPop) {
+      res = WillPopScope(
+        onWillPop: () async => !_isPickingImage,
+        child: res,
+      );
+    }
+    return res;
   }
 }