Merge pull request #69 from lowminchien/main

Allow to customise the view of pickers
flutter-form-builder-ecosystem · Sep 4, 2023 · d76cf4d · d76cf4d
2 parents eee7332 + ee16639
commit d76cf4d
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 41 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -58,6 +58,10 @@ class MyHomePageState extends State<MyHomePage> {
                     ),
                   )
                 ],
+                customTypeViewerBuilder: (children) => Row(
+                  mainAxisAlignment: MainAxisAlignment.end,
+                  children: children,
+                ),
                 onFileLoading: (val) {
                   debugPrint(val.toString());
                 },

diff --git a/lib/src/form_builder_file_picker.dart b/lib/src/form_builder_file_picker.dart
@@ -71,34 +71,39 @@ class FormBuilderFilePicker
   /// to support user interactions with the picked files.
   final FileViewerBuilder? customFileViewerBuilder;
 
+  /// Allow to customise the view of the pickers.
+  final Widget Function(List<Widget> types)? customTypeViewerBuilder;
+
   /// Creates field for image(s) from user device storage
-  FormBuilderFilePicker({
-    //From Super
-    super.key,
-    required super.name,
-    super.validator,
-    super.initialValue,
-    super.decoration,
-    super.onChanged,
-    super.valueTransformer,
-    super.enabled,
-    super.onSaved,
-    super.autovalidateMode = AutovalidateMode.disabled,
-    super.onReset,
-    super.focusNode,
-    this.maxFiles,
-    this.withData = kIsWeb,
-    this.withReadStream = false,
-    this.allowMultiple = false,
-    this.previewImages = true,
-    this.typeSelectors = const [
-      TypeSelector(type: FileType.any, selector: Icon(Icons.add_circle))
-    ],
-    this.allowedExtensions,
-    this.onFileLoading,
-    this.allowCompression = true,
-    this.customFileViewerBuilder,
-  }) : super(
+  FormBuilderFilePicker(
+      {
+      //From Super
+      super.key,
+      required super.name,
+      super.validator,
+      super.initialValue,
+      super.decoration,
+      super.onChanged,
+      super.valueTransformer,
+      super.enabled,
+      super.onSaved,
+      super.autovalidateMode = AutovalidateMode.disabled,
+      super.onReset,
+      super.focusNode,
+      this.maxFiles,
+      this.withData = kIsWeb,
+      this.withReadStream = false,
+      this.allowMultiple = false,
+      this.previewImages = true,
+      this.typeSelectors = const [
+        TypeSelector(type: FileType.any, selector: Icon(Icons.add_circle))
+      ],
+      this.allowedExtensions,
+      this.onFileLoading,
+      this.allowCompression = true,
+      this.customFileViewerBuilder,
+      this.customTypeViewerBuilder})
+      : super(
           builder: (FormFieldState<List<PlatformFile>?> field) {
             final state = field as _FormBuilderFilePickerState;
 
@@ -109,21 +114,14 @@ class FormBuilderFilePicker
                       : null),
               child: Column(
                 children: <Widget>[
-                  Row(
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    children: <Widget>[
-                      ...typeSelectors.map(
-                        (typeSelector) => InkWell(
-                          onTap: state.enabled &&
-                                  (null == state._remainingItemCount ||
-                                      state._remainingItemCount! > 0)
-                              ? () => state.pickFiles(field, typeSelector.type)
-                              : null,
-                          child: typeSelector.selector,
+                  customTypeViewerBuilder != null
+                      ? customTypeViewerBuilder(
+                          state.getTypeSelectorActions(typeSelectors, field))
+                      : Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: state.getTypeSelectorActions(
+                              typeSelectors, field),
                         ),
-                      ),
-                    ],
-                  ),
                   const SizedBox(height: 3),
                   customFileViewerBuilder != null
                       ? customFileViewerBuilder.call(state._files,
@@ -305,6 +303,21 @@ class _FormBuilderFilePickerState extends FormBuilderFieldDecorationState<
     );
   }
 
+  List<Widget> getTypeSelectorActions(List<TypeSelector> typeSelectors,
+      FormFieldState<List<PlatformFile>?> field) {
+    return <Widget>[
+      ...typeSelectors.map(
+        (typeSelector) => InkWell(
+          onTap: enabled &&
+                  (null == _remainingItemCount || _remainingItemCount! > 0)
+              ? () => pickFiles(field, typeSelector.type)
+              : null,
+          child: typeSelector.selector,
+        ),
+      ),
+    ];
+  }
+
   IconData getIconData(String fileExtension) {
     final lowerCaseFileExt = fileExtension.toLowerCase();
     if (imageFileExts.contains(lowerCaseFileExt)) return Icons.image;