Improved web support for FormBuilderImagePicker

Author: danvick

lib/src/fields/form_builder_image_picker.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_form_builder/flutter_form_builder.dart';
 import 'package:flutter_form_builder/src/widgets/image_source_sheet.dart';
@@ -29,8 +30,13 @@ class FormBuilderImagePicker extends FormBuilderField {
 
   final Function(Image) onImage;
   final int maxImages;
+  final Widget cameraIcon;
+  final Widget galleryIcon;
+  final Widget cameraLabel;
+  final Widget galleryLabel;
+  final EdgeInsets bottomSheetPadding;
 
-  FormBuilderImagePicker({
+  FormBuilderImagePicker( {
     Key key,
     //From Super
     @required String name,
@@ -55,6 +61,11 @@ class FormBuilderImagePicker extends FormBuilderField {
     this.preferredCameraDevice = CameraDevice.rear,
     this.onImage,
     this.maxImages,
+    this.cameraIcon = const Icon(Icons.camera_enhance),
+    this.galleryIcon = const Icon(Icons.image),
+    this.cameraLabel = const Text('Camera'),
+    this.galleryLabel = const Text('Gallery'),
+    this.bottomSheetPadding = const EdgeInsets.all(0),
   })  : assert(maxImages == null || maxImages >= 0),
         super(
           key: key,
@@ -94,9 +105,11 @@ class FormBuilderImagePicker extends FormBuilderField {
                               width: previewWidth,
                               height: previewHeight,
                               margin: previewMargin,
-                              child: item is String
-                                  ? Image.network(item, fit: BoxFit.cover)
-                                  : Image.file(item, fit: BoxFit.cover),
+                              child: kIsWeb
+                                  ? Image.memory(item, fit: BoxFit.cover)
+                                  : item is String
+                                      ? Image.network(item, fit: BoxFit.cover)
+                                      : Image.file(item, fit: BoxFit.cover),
                             ),
                             if (!state.readOnly)
                               InkWell(
@@ -141,15 +154,27 @@ class FormBuilderImagePicker extends FormBuilderField {
                           showModalBottomSheet(
                             context: state.context,
                             builder: (_) {
-                              return ImageSourceSheet(
+                              return ImageSourceBottomSheet(
                                 maxHeight: maxHeight,
                                 maxWidth: maxWidth,
                                 imageQuality: imageQuality,
                                 preferredCameraDevice: preferredCameraDevice,
+                                bottomSheetPadding: bottomSheetPadding,
+                                cameraIcon: cameraIcon,
+                                cameraLabel: cameraLabel,
+                                galleryIcon: galleryIcon,
+                                galleryLabel: galleryLabel,
                                 onImageSelected: (image) {
                                   state.requestFocus();
-                                  field
-                                      .didChange([...field.value ?? [], image]);
+                                  field.didChange([
+                                    ...field.value ?? [],
+                                    image,
+                                  ]);
+                                  Navigator.of(state.context).pop();
+                                },
+                                onImage: (image) {
+                                  field.didChange([...field.value, image]);
+                                  onChanged?.call(field.value);
                                   Navigator.of(state.context).pop();
                                 },
                               );

lib/src/widgets/image_source_sheet.dart

@@ -1,10 +1,11 @@
 import 'dart:io';
+import 'dart:typed_data' show Uint8List;
 
-import 'package:flutter/material.dart';
 import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
 import 'package:image_picker/image_picker.dart';
 
-class ImageSourceSheet extends StatelessWidget {
+class ImageSourceBottomSheet extends StatelessWidget {
   /// Optional maximum height of image
   final double maxHeight;
 
@@ -25,22 +26,33 @@ class ImageSourceSheet extends StatelessWidget {
   /// Callback when an image is selected.
   ///
   /// **Note**: This will work on web platform whereas [onImageSelected] will not.
-  final Function(Image) onImage;
+  final Function(Uint8List) onImage;
 
   /// Callback when an image is selected.
   ///
   /// **Warning**: This will _NOT_ work on web platform because [File] is not
   /// available.
   final Function(File) onImageSelected;
 
-  ImageSourceSheet({
+  final Widget cameraIcon;
+  final Widget galleryIcon;
+  final Widget cameraLabel;
+  final Widget galleryLabel;
+  final EdgeInsets bottomSheetPadding;
+
+  ImageSourceBottomSheet({
     Key key,
     this.maxHeight,
     this.maxWidth,
     this.imageQuality,
     this.preferredCameraDevice = CameraDevice.rear,
     this.onImage,
     this.onImageSelected,
+    this.cameraIcon,
+    this.galleryIcon,
+    this.cameraLabel,
+    this.galleryLabel,
+    this.bottomSheetPadding,
   })  : assert(null != onImage || null != onImageSelected),
         super(key: key);
 
@@ -54,36 +66,36 @@ class ImageSourceSheet extends StatelessWidget {
       preferredCameraDevice: preferredCameraDevice,
     );
     if (null != pickedFile) {
-      if (null != onImage) {
-        final image = Image.memory(await pickedFile.readAsBytes());
-        onImage(image);
-      }
-
-      if (null != onImageSelected) {
-        // Warning:  this will not work on the web platform because pickedFile
-        // will instead point to a network resource.
-        assert(!kIsWeb);
-
-        final imageFile = File(pickedFile.path);
-        assert(null != imageFile);
-        onImageSelected(imageFile);
+      if (kIsWeb) {
+        if (null != onImage) {
+          onImage(await pickedFile.readAsBytes());
+        }
+      } else {
+        if (null != onImageSelected) {
+          // Warning:  this will not work on the web platform because pickedFile
+          // will instead point to a network resource.
+          final imageFile = File(pickedFile.path);
+          assert(null != imageFile);
+          onImageSelected(imageFile);
+        }
       }
     }
   }
 
   @override
   Widget build(BuildContext context) {
     return Container(
+      padding: bottomSheetPadding,
       child: Wrap(
         children: <Widget>[
           ListTile(
-            leading: const Icon(Icons.camera_enhance),
-            title: Text('Camera'),
+            leading: cameraIcon,
+            title: cameraLabel,
             onTap: () => _onPickImage(ImageSource.camera),
           ),
           ListTile(
-            leading: const Icon(Icons.image),
-            title: Text('Gallery'),
+            leading: galleryIcon,
+            title: galleryLabel,
             onTap: () => _onPickImage(ImageSource.gallery),
           )
         ],