Merge pull request #149 from 3212-Enertech-Global/main

feat: #112 Searchable Multiselect Dropdown

Author: deandreamatias

example/lib/main.dart

@@ -89,6 +89,43 @@ class MyHomePageState extends State<MyHomePage> {
                       country.toLowerCase().contains(filter.toLowerCase()),
                 ),
                 const SizedBox(height: 15),
+                FormBuilderSearchableMultiSelectDropdown<String>(
+                  name: 'multiselect_dropdown_offline',
+                  items: allCountries,
+                  onChanged: _onChanged,
+                  decoration: const InputDecoration(
+                    labelText: 'Multiselect Dropdown Offline',
+                  ),
+                  popupProps: const PopupPropsMultiSelection.menu(
+                    showSearchBox: true,
+                    fit: FlexFit.loose,
+                  ),
+                  filterFn: (country, filter) =>
+                      country.toLowerCase().contains(filter.toLowerCase()),
+                ),
+                const SizedBox(height: 15),
+                FormBuilderSearchableMultiSelectDropdown<String>(
+                  name: 'multiselect_dropdown_online',
+                  onChanged: _onChanged,
+                  asyncItems: (filter, _) async {
+                    await Future.delayed(const Duration(seconds: 1));
+                    return allCountries
+                        .where(
+                          (element) => element.toLowerCase().contains(
+                            filter.toLowerCase(),
+                          ),
+                        )
+                        .toList();
+                  },
+                  decoration: const InputDecoration(
+                    labelText: 'Multiselect Dropdown Online',
+                  ),
+                  popupProps: const PopupPropsMultiSelection.menu(
+                    showSearchBox: true,
+                    fit: FlexFit.loose,
+                  ),
+                ),
+                const SizedBox(height: 15),
                 FormBuilderColorPickerField(
                   name: 'color_picker',
                   initialValue: Colors.yellow,

lib/form_builder_extra_fields.dart

@@ -4,6 +4,7 @@ export 'package:flutter_rating_bar/flutter_rating_bar.dart';
 export 'src/fields/form_builder_color_picker.dart';
 export 'src/fields/form_builder_rating_bar.dart';
 export 'src/fields/form_builder_searchable_dropdown.dart';
+export 'src/fields/form_builder_searchable_multiselect_dropdown.dart';
 export 'src/fields/form_builder_signature_pad.dart';
 export 'src/fields/form_builder_touch_spin.dart';
 export 'src/fields/form_builder_typeahead.dart';

lib/src/fields/form_builder_searchable_multiselect_dropdown.dart

@@ -0,0 +1,158 @@
+import 'package:dropdown_search/dropdown_search.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_form_builder/flutter_form_builder.dart';
+
+/// Field for selecting value(s) from a searchable list
+class FormBuilderSearchableMultiSelectDropdown<T>
+    extends FormBuilderFieldDecoration<List<T>> {
+  ///offline items list
+  final List<T> items;
+
+  ///selected items
+  final List<T> selectedItems;
+
+  ///to customize list of items UI
+  final DropdownSearchBuilder<List<T>>? dropdownBuilder;
+
+  ///customize the fields the be shown
+  final DropdownSearchItemAsString<T>? itemAsString;
+
+  ///	custom filter function
+  final DropdownSearchFilterFn<T>? filterFn;
+
+  ///function that compares two object with the same type to detected if it's the selected item or not
+  final DropdownSearchCompareFn<T>? compareFn;
+
+  ///dropdownSearch input decoration
+  final InputDecoration? dropdownSearchDecoration;
+
+  /// How the text in the decoration should be aligned horizontally.
+  final TextAlign? dropdownSearchTextAlign;
+
+  /// How the text should be aligned vertically.
+  final TextAlignVertical? dropdownSearchTextAlignVertical;
+
+  /// An optional method to call with the final value when the form is saved via
+  //final FormFieldSetter<List<T>>? onSavedMultiSelection;
+
+  /// callback executed before applying value change
+  final BeforeChange<List<T>>? onBeforeChange;
+
+  ///called when a new item added on Multi selection mode
+  final OnItemAdded<T>? popupOnItemAdded;
+
+  ///called when a new item added on Multi selection mode
+  final OnItemRemoved<T>? popupOnItemRemoved;
+
+  ///widget used to show checked items in multiSelection mode
+  final DropdownSearchPopupItemBuilder<T>? popupSelectionWidget;
+
+  ///widget used to validate items in multiSelection mode
+  final ValidationMultiSelectionBuilder<T?>?
+  popupValidationMultiSelectionWidget;
+
+  ///widget to add custom widget like addAll/removeAll on popup multi selection mode
+  final ValidationMultiSelectionBuilder<T>? popupCustomMultiSelectionWidget;
+
+  ///function that returns item from API
+  final DropdownSearchOnFind<T>? asyncItems;
+
+  //
+  final PopupPropsMultiSelection<T> popupProps;
+
+  ///custom dropdown clear button icon properties
+  final ClearButtonProps? clearButtonProps;
+
+  /// style on which to base the label
+  final TextStyle? dropdownSearchTextStyle;
+
+  ///custom dropdown icon button properties
+  final DropdownButtonProps? dropdownButtonProps;
+
+  // Creates field for selecting value(s) from a searchable list
+  FormBuilderSearchableMultiSelectDropdown({
+    super.key,
+    super.autovalidateMode,
+    super.enabled,
+    super.focusNode,
+    super.onSaved,
+    super.validator,
+    super.decoration,
+    required super.name,
+    super.initialValue,
+    super.onChanged,
+    super.valueTransformer,
+    super.onReset,
+    this.asyncItems,
+    this.compareFn,
+    this.dropdownSearchDecoration,
+    this.dropdownSearchTextAlign,
+    this.dropdownSearchTextAlignVertical,
+    this.filterFn,
+    this.itemAsString,
+    this.items = const [],
+    this.onBeforeChange,
+    this.popupOnItemAdded,
+    this.popupOnItemRemoved,
+    this.popupSelectionWidget,
+    this.selectedItems = const [],
+    this.popupProps = const PopupPropsMultiSelection.menu(
+      showSearchBox: true,
+      fit: FlexFit.loose,
+    ),
+    this.clearButtonProps,
+    this.dropdownSearchTextStyle,
+    this.dropdownButtonProps,
+    this.dropdownBuilder,
+  }) : assert(T == String || compareFn != null),
+       popupCustomMultiSelectionWidget = null,
+       popupValidationMultiSelectionWidget = null,
+       super(
+         builder: (field) {
+           final state =
+               field as FormBuilderSearchableMultiSelectDropdownState<T>;
+           return DropdownSearch<T>.multiSelection(
+             autoValidateMode: autovalidateMode,
+             items: (filter, infiniteScrollProps) => asyncItems == null
+                 ? items
+                 : asyncItems(filter, infiniteScrollProps),
+             decoratorProps: DropDownDecoratorProps(
+               decoration: state.decoration,
+               textAlign: dropdownSearchTextAlign,
+               textAlignVertical: dropdownSearchTextAlignVertical,
+               baseStyle: dropdownSearchTextStyle,
+             ),
+             suffixProps: DropdownSuffixProps(
+               clearButtonProps: clearButtonProps ?? const ClearButtonProps(),
+               dropdownButtonProps:
+                   dropdownButtonProps ?? const DropdownButtonProps(),
+             ),
+             enabled: state.enabled,
+             filterFn: filterFn,
+             itemAsString: itemAsString,
+             compareFn: compareFn,
+             popupProps: popupProps,
+             onBeforeChange: onBeforeChange,
+             onChanged: (value) {
+               state.didChange(value);
+             },
+             dropdownBuilder: dropdownBuilder,
+             selectedItems: state.value ?? [],
+           );
+         },
+       );
+
+  @override
+  FormBuilderFieldDecorationState<
+    FormBuilderSearchableMultiSelectDropdown<T>,
+    List<T>
+  >
+  createState() => FormBuilderSearchableMultiSelectDropdownState<T>();
+}
+
+class FormBuilderSearchableMultiSelectDropdownState<T>
+    extends
+        FormBuilderFieldDecorationState<
+          FormBuilderSearchableMultiSelectDropdown<T>,
+          List<T>
+        > {}