Merge branch 'main' of github.com:flutter-form-builder-ecosystem/form_builder_image_picker

deandreamatias · deandreamatias · commit 24ba9973e0f1 · 2023-02-25T14:01:38.000+01:00
diff --git a/README.md b/README.md
@@ -14,7 +14,6 @@ ___
 - [Use](#use)
     - [Setup](#setup)
     - [Basic use](#basic-use)
-    - [Especific uses](#especific-uses)
 - [Support](#support)
     - [Contribute](#contribute)
     - [Questions and answers](#questions-and-answers)
@@ -36,7 +35,7 @@ ___
 
 Since this package makes use of [image_picker](https://pub.dev/packages/image_picker) package, for platform specific setup, follow the instructions [here](https://github.com/flutter/plugins/tree/main/packages/image_picker/image_picker#installation)
 
-### Basuc use
+### Basic use
 
 ```dart
 FormBuilder(
@@ -53,7 +52,22 @@ FormBuilder(
 ),
 ```
 
-See [pud.dev example tab](https://pub.dev/packages/form_builder_image_picker/example) or [github code](example/lib/main.dart) for more details
+### Only specific pickers
+```dart
+FormBuilder(
+  child: Column(
+    mainAxisAlignment: MainAxisAlignment.center,
+    children: <Widget>[
+      FormBuilderImagePicker(
+        name: 'noCamera',
+        availableImageSources: const [ImageSourceOption.gallery],
+      ),
+    ],
+  ),
+),
+```
+
+See [pub.dev example tab](https://pub.dev/packages/form_builder_image_picker/example) or [github code](example/lib/main.dart) for more details
 
 ## Support
 
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';
 
@@ -26,6 +27,7 @@ class MyApp extends StatelessWidget {
 class ApiImage {
   final String imageUrl;
   final String id;
+
   ApiImage({
     required this.imageUrl,
     required this.id,
@@ -138,6 +140,50 @@ class MyHomePage extends StatelessWidget {
                     iconColor: Colors.white,
                     icon: Icons.ac_unit_rounded,
                   ),
+                  const SizedBox(height: 15),
+                  FormBuilderImagePicker(
+                    name: 'onlyCamera',
+                    decoration: const InputDecoration(
+                        labelText: 'Pick Photos (only from camera)'),
+                    availableImageSources: const [ImageSourceOption.camera],
+                  ),
+                  const SizedBox(height: 15),
+                  FormBuilderImagePicker(
+                    name: 'onlyGallery',
+                    decoration: const InputDecoration(
+                        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/form_builder_image_picker.dart b/lib/form_builder_image_picker.dart
@@ -1,3 +1,4 @@
 library form_builder_image_picker;
 
 export 'src/form_builder_image_picker.dart';
+export 'src/image_source_option.dart';
diff --git a/lib/src/form_builder_image_picker.dart b/lib/src/form_builder_image_picker.dart
@@ -5,6 +5,7 @@ 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';
 
 /// Field for picking image(s) from Gallery or Camera.
@@ -95,6 +96,22 @@ class FormBuilderImagePicker extends FormBuilderField<List<dynamic>> {
   /// fit for each image
   final BoxFit fit;
 
+  /// The sources available to pick from.
+  /// 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
@@ -135,6 +152,12 @@ 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,
+    ],
   })  : assert(maxImages == null || maxImages >= 0),
         super(
           key: key,
@@ -188,29 +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,
-                          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_option.dart b/lib/src/image_source_option.dart
@@ -0,0 +1,10 @@
+/// Options where a user can pick images from
+enum ImageSourceOption {
+  /// From the device camera
+  /// (via [ImageSource.camera])
+  camera,
+
+  /// From the gallery (or local files on the web)
+  /// (via [ImageSource.gallery])
+  gallery
+}
diff --git a/lib/src/image_source_sheet.dart b/lib/src/image_source_sheet.dart
@@ -1,6 +1,10 @@
 import 'package:flutter/material.dart';
 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;
@@ -24,13 +28,21 @@ class ImageSourceBottomSheet extends StatefulWidget {
   /// Callback when an image is selected.
   final void Function(Iterable<XFile> files) onImageSelected;
 
+  /// The sources to create ListTiles for.
+  /// Either [ImageSourceOption.gallery], [ImageSourceOption.camera] or both.
+  final List<ImageSourceOption> availableImageSources;
+
   final Widget? cameraIcon;
   final Widget? galleryIcon;
   final Widget? cameraLabel;
   final Widget? galleryLabel;
   final EdgeInsets? bottomSheetPadding;
   final bool preventPop;
 
+  final Widget Function(
+          FutureVoidCallBack cameraPicker, FutureVoidCallBack galleryPicker)?
+      optionsBuilder;
+
   const ImageSourceBottomSheet({
     Key? key,
     this.remainingImages,
@@ -45,6 +57,8 @@ class ImageSourceBottomSheet extends StatefulWidget {
     this.cameraLabel,
     this.galleryLabel,
     this.bottomSheetPadding,
+    this.optionsBuilder,
+    required this.availableImageSources,
   }) : super(key: key);
 
   @override
@@ -90,20 +104,28 @@ 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(
         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.availableImageSources.contains(ImageSourceOption.camera))
+            ListTile(
+              leading: widget.cameraIcon,
+              title: widget.cameraLabel,
+              onTap: () => _onPickImage(ImageSource.camera),
+            ),
+          if (widget.availableImageSources.contains(ImageSourceOption.gallery))
+            ListTile(
+              leading: widget.galleryIcon,
+              title: widget.galleryLabel,
+              onTap: () => _onPickImage(ImageSource.gallery),
+            ),
         ],
       ),
     );

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`library form_builder_image_picker;`
`2`	`2`
`3`	`3`	`export 'src/form_builder_image_picker.dart';`
	`4`	`+export 'src/image_source_option.dart';`