From 9f666c03298d5bb4575e09b4c34603afe33ffe28 Mon Sep 17 00:00:00 2001 From: itsmeabhi12 Date: Thu, 17 Nov 2022 21:33:15 +0545 Subject: [PATCH 1/3] feat : example for custom picker view --- example/lib/main.dart | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/example/lib/main.dart b/example/lib/main.dart index e607eca..2a7a61e 100644 --- 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: () { From 904332faceca0450af96d4b2943cf126901599f7 Mon Sep 17 00:00:00 2001 From: itsmeabhi12 Date: Thu, 17 Nov 2022 21:34:09 +0545 Subject: [PATCH 2/3] feat: two optional callback added for custom view --- lib/src/form_builder_image_picker.dart | 63 +++++++++++++++++--------- 1 file changed, 41 insertions(+), 22 deletions(-) diff --git a/lib/src/form_builder_image_picker.dart b/lib/src/form_builder_image_picker.dart index 1800228..546ab37 100644 --- a/lib/src/form_builder_image_picker.dart +++ b/lib/src/form_builder_image_picker.dart @@ -100,6 +100,18 @@ class FormBuilderImagePicker extends FormBuilderField> { /// Either [ImageSourceOption.gallery], [ImageSourceOption.camera] or both. final List availableImageSources; + ///A callback that returns a pickup options + ///ListTile(inside Wrap) by Default + ///use optionsBuilder to return a widget of your choice + final ValueChanged? 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> { 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> { onTap: () async { final remainingImages = maxImages == null ? null : maxImages - value.length; - await showModalBottomSheet( - 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( + context: state.context, + builder: (_) { + return imageSourceSheet; + }, + ); }, ); From 65828bcee3f09738d8b3eb63038d2a786a88632b Mon Sep 17 00:00:00 2001 From: itsmeabhi12 Date: Thu, 17 Nov 2022 21:34:38 +0545 Subject: [PATCH 3/3] feat : optionBuilder callback added --- lib/src/image_source_sheet.dart | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/lib/src/image_source_sheet.dart b/lib/src/image_source_sheet.dart index a88cc3c..4bcff0f 100644 --- 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 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 { @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(