[FEATURE] Allow to customise the view of pickers

flutter-form-builder-ecosystem · Sep 3, 2023 · 21a0007 · 21a0007
1 parent eee7332
commit 21a0007
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 13 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,6 +71,9 @@ 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
@@ -98,6 +101,7 @@ class FormBuilderFilePicker
     this.onFileLoading,
     this.allowCompression = true,
     this.customFileViewerBuilder,
+    this.customTypeViewerBuilder
   }) : super(
           builder: (FormFieldState<List<PlatformFile>?> field) {
             final state = field as _FormBuilderFilePickerState;
@@ -109,20 +113,11 @@ class FormBuilderFilePicker
                       : null),
               child: Column(
                 children: <Widget>[
-                  Row(
+                  customTypeViewerBuilder != null
+                      ? customTypeViewerBuilder(state.getTypeSelectorActions(typeSelectors, field))
+                      : 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,
-                        ),
-                      ),
-                    ],
+                    children: state.getTypeSelectorActions(typeSelectors, field),
                   ),
                   const SizedBox(height: 3),
                   customFileViewerBuilder != null
@@ -305,6 +300,22 @@ 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;