Merge pull request #41 from itsmeabhi12/main

Added Options For Custom Picker View
flutter-form-builder-ecosystem · Nov 20, 2022 · 33b3053 · 33b3053
2 parents 2df184d + 65828bc
commit 33b3053
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 22 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -1,3 +1,4 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_form_builder/flutter_form_builder.dart';
 
@@ -153,6 +154,36 @@ class MyHomePage extends StatelessWidget {
                         labelText: 'Pick Photos (only from gallery)'),
                     availableImageSources: const [ImageSourceOption.gallery],
                   ),
+                  FormBuilderImagePicker(
+                    decoration: const InputDecoration(
+                        labelText: 'Pick Photos (with custom view)'),
+                    name: "CupertinoActionSheet",
+                    optionsBuilder: (cameraPicker, galleryPicker) =>
+                        CupertinoActionSheet(
+                      title: const Text('Image'),
+                      message: const Text('Pick an image from given options'),
+                      actions: [
+                        CupertinoActionSheetAction(
+                          isDefaultAction: true,
+                          onPressed: () {
+                            cameraPicker();
+                          },
+                          child: const Text('Camera'),
+                        ),
+                        CupertinoActionSheetAction(
+                          isDefaultAction: true,
+                          onPressed: () {
+                            galleryPicker();
+                          },
+                          child: const Text('Gallery'),
+                        )
+                      ],
+                    ),
+                    onTap: (child) => showCupertinoModalPopup(
+                      context: context,
+                      builder: (context) => child,
+                    ),
+                  ),
                   ElevatedButton(
                     child: const Text('Submit'),
                     onPressed: () {

diff --git a/lib/src/form_builder_image_picker.dart b/lib/src/form_builder_image_picker.dart
@@ -100,6 +100,18 @@ class FormBuilderImagePicker extends FormBuilderField<List<dynamic>> {
   /// Either [ImageSourceOption.gallery], [ImageSourceOption.camera] or both.
   final List<ImageSourceOption> availableImageSources;
 
+  ///A callback that returns a  pickup options
+  ///ListTile(inside Wrap) by Default
+  ///use optionsBuilder to return a widget of your choice
+  final ValueChanged<ImageSourceBottomSheet>? onTap;
+
+  /// use this callback if you want custom view for options
+  /// call cameraPicker() to picks image from camera
+  /// call galleryPicker() to picks image from gallery
+  final Widget Function(
+          FutureVoidCallBack cameraPicker, FutureVoidCallBack galleryPicker)?
+      optionsBuilder;
+
   FormBuilderImagePicker({
     Key? key,
     //From Super
@@ -140,6 +152,8 @@ class FormBuilderImagePicker extends FormBuilderField<List<dynamic>> {
     this.galleryLabel = const Text('Gallery'),
     this.bottomSheetPadding = EdgeInsets.zero,
     this.placeholderImage,
+    this.onTap,
+    this.optionsBuilder,
     this.availableImageSources = const [
       ImageSourceOption.camera,
       ImageSourceOption.gallery,
@@ -197,30 +211,35 @@ class FormBuilderImagePicker extends FormBuilderField<List<dynamic>> {
                   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,
-                          cameraIcon: cameraIcon,
-                          cameraLabel: cameraLabel,
-                          galleryIcon: galleryIcon,
-                          galleryLabel: galleryLabel,
-                          availableImageSources: availableImageSources,
-                          onImageSelected: (image) {
-                            state.requestFocus();
-                            field.didChange([...value, ...image]);
-                            Navigator.pop(state.context);
-                          },
-                        );
+
+                    final imageSourceSheet = ImageSourceBottomSheet(
+                      maxHeight: maxHeight,
+                      maxWidth: maxWidth,
+                      preventPop: preventPop,
+                      remainingImages: remainingImages,
+                      imageQuality: imageQuality,
+                      preferredCameraDevice: preferredCameraDevice,
+                      bottomSheetPadding: bottomSheetPadding,
+                      cameraIcon: cameraIcon,
+                      cameraLabel: cameraLabel,
+                      galleryIcon: galleryIcon,
+                      galleryLabel: galleryLabel,
+                      optionsBuilder: optionsBuilder,
+                      availableImageSources: availableImageSources,
+                      onImageSelected: (image) {
+                        state.requestFocus();
+                        field.didChange([...value, ...image]);
+                        Navigator.pop(state.context);
                       },
                     );
+                    onTap != null
+                        ? onTap(imageSourceSheet)
+                        : await showModalBottomSheet<void>(
+                            context: state.context,
+                            builder: (_) {
+                              return imageSourceSheet;
+                            },
+                          );
                   },
                 );
 

diff --git a/lib/src/image_source_sheet.dart b/lib/src/image_source_sheet.dart
@@ -3,6 +3,8 @@ import 'package:image_picker/image_picker.dart';
 
 import 'image_source_option.dart';
 
+typedef FutureVoidCallBack = Future<void> Function();
+
 class ImageSourceBottomSheet extends StatefulWidget {
   /// Optional maximum height of image
   final double? maxHeight;
@@ -37,6 +39,10 @@ class ImageSourceBottomSheet extends StatefulWidget {
   final EdgeInsets? bottomSheetPadding;
   final bool preventPop;
 
+  final Widget Function(
+          FutureVoidCallBack cameraPicker, FutureVoidCallBack galleryPicker)?
+      optionsBuilder;
+
   const ImageSourceBottomSheet({
     Key? key,
     this.remainingImages,
@@ -51,6 +57,7 @@ class ImageSourceBottomSheet extends StatefulWidget {
     this.cameraLabel,
     this.galleryLabel,
     this.bottomSheetPadding,
+    this.optionsBuilder,
     required this.availableImageSources,
   }) : super(key: key);
 
@@ -97,6 +104,12 @@ class ImageSourceBottomSheetState extends State<ImageSourceBottomSheet> {
 
   @override
   Widget build(BuildContext context) {
+    if (widget.optionsBuilder != null) {
+      return widget.optionsBuilder!(
+        () => _onPickImage(ImageSource.camera),
+        () => _onPickImage(ImageSource.gallery),
+      );
+    }
     Widget res = Container(
       padding: widget.bottomSheetPadding,
       child: Wrap(