Merge pull request #54 from mvarendorff/feat/preview-builder

feat: support fully custom preview

Author: deandreamatias

example/lib/main.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_form_builder/flutter_form_builder.dart';
-
 import 'package:form_builder_image_picker/form_builder_image_picker.dart';
 
 void main() {
@@ -52,6 +51,7 @@ class MyHomePage extends StatelessWidget {
             key: _formKey,
             child: SingleChildScrollView(
               child: Column(
+                mainAxisSize: MainAxisSize.min,
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: <Widget>[
                   FormBuilderImagePicker(
@@ -157,7 +157,7 @@ class MyHomePage extends StatelessWidget {
                   FormBuilderImagePicker(
                     decoration: const InputDecoration(
                         labelText: 'Pick Photos (with custom view)'),
-                    name: "CupertinoActionSheet",
+                    name: 'CupertinoActionSheet',
                     optionsBuilder: (cameraPicker, galleryPicker) =>
                         CupertinoActionSheet(
                       title: const Text('Image'),
@@ -184,6 +184,23 @@ class MyHomePage extends StatelessWidget {
                       builder: (context) => child,
                     ),
                   ),
+                  FormBuilderImagePicker(
+                    name: 'customPreview',
+                    maxImages: null,
+                    previewBuilder: (context, images, addButton) =>
+                        ConstrainedBox(
+                      constraints: const BoxConstraints(
+                        minHeight: 130,
+                        maxHeight: 500,
+                      ),
+                      child: GridView.extent(
+                        maxCrossAxisExtent: 130,
+                        mainAxisSpacing: 4,
+                        crossAxisSpacing: 4,
+                        children: [...images, if (addButton != null) addButton],
+                      ),
+                    ),
+                  ),
                   ElevatedButton(
                     child: const Text('Submit'),
                     onPressed: () {

example/pubspec.lock

@@ -113,7 +113,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "5.0.0"
+    version: "4.0.0"
   http:
     dependency: transitive
     description:

lib/src/form_builder_image_picker.dart

@@ -1,13 +1,20 @@
 import 'dart:typed_data';
 
 import 'package:async/async.dart';
+import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_form_builder/flutter_form_builder.dart';
 import 'package:image_picker/image_picker.dart';
 
 import 'image_source_option.dart';
 import 'image_source_sheet.dart';
 
+typedef PreviewBuilder = Widget Function(
+  BuildContext,
+  List<Widget> children,
+  Widget? addButton,
+);
+
 /// Field for picking image(s) from Gallery or Camera.
 ///
 /// Field value is a list of objects.
@@ -37,6 +44,9 @@ class FormBuilderImagePicker extends FormBuilderFieldDecoration<List<dynamic>> {
   /// margins between image previews
   final EdgeInsetsGeometry? previewMargin;
 
+  /// May be supplied for a fully custom display of the image preview
+  final PreviewBuilder? previewBuilder;
+
   /// placeholder image displayed when picking a new image
   final ImageProvider? placeholderImage;
 
@@ -132,6 +142,7 @@ class FormBuilderImagePicker extends FormBuilderFieldDecoration<List<dynamic>> {
     this.showDecoration = true,
     this.placeholderWidget,
     this.previewAutoSizeWidth = true,
+    this.previewBuilder,
     this.fit = BoxFit.cover,
     this.preventPop = false,
     this.displayCustomType,
@@ -307,6 +318,20 @@ class FormBuilderImagePicker extends FormBuilderFieldDecoration<List<dynamic>> {
               );
             }
 
+            if (previewBuilder != null) {
+              return Builder(builder: (context) {
+                final widgets = value
+                    .mapIndexed((i, v) => itemBuilder(context, v, i))
+                    .toList();
+
+                return previewBuilder(
+                  context,
+                  widgets,
+                  canUpload ? addButtonBuilder(context) : null,
+                );
+              });
+            }
+
             final child = SizedBox(
               height: previewHeight,
               child: itemCount == 0

pubspec.lock

@@ -26,7 +26,7 @@ packages:
     source: hosted
     version: "1.1.1"
   collection:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: collection
       sha256: f092b211a4319e98e5ff58223576de6c2803db36221657b46c82574721240687

pubspec.yaml

@@ -16,6 +16,7 @@ dependencies:
     sdk: flutter
   flutter_form_builder: ^9.1.1
   async: ^2.11.0
+  collection: ^1.17.0
   image_picker: ^1.0.4
 
 dev_dependencies: