diff --git a/example/lib/main.dart b/example/lib/main.dart index ef3b412..d9d50bf 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -58,6 +58,10 @@ class MyHomePageState extends State { ), ) ], + 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 index 2476154..6b4d1f1 100644 --- 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 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?> field) { final state = field as _FormBuilderFilePickerState; @@ -109,21 +114,14 @@ class FormBuilderFilePicker : null), child: Column( children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - ...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 getTypeSelectorActions(List typeSelectors, + FormFieldState?> field) { + return [ + ...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;