MultiSelectDropDown<T> constructor

const MultiSelectDropDown<T>({ Key? key, required OnOptionSelected<T>? onOptionSelected, required List<ValueItem<T>> options, void onOptionRemoved(int index, ValueItem<T> option)?, Color? selectedOptionTextColor, ChipConfig chipConfig = const ChipConfig(), SelectionType selectionType = SelectionType.multi, String hint = 'Select', Color? hintColor = Colors.grey, double? hintFontSize = 14.0, List<ValueItem<T>> selectedOptions = const [], List<ValueItem<T>> disabledOptions = const [], bool alwaysShowOptionIcon = false, TextStyle? optionTextStyle, Icon? selectedOptionIcon = const Icon(Icons.check), Color? selectedOptionBackgroundColor, Color? optionsBackgroundColor, Color? fieldBackgroundColor = Colors.white, double dropdownHeight = 200, bool showChipInSingleSelectMode = false, Icon? suffixIcon = const Icon(Icons.arrow_drop_down), Icon? clearIcon = const Icon(Icons.close_outlined, size: 14), Widget selectedItemBuilder(BuildContext, ValueItem<T>)?, Widget? optionSeparator, Decoration? inputDecoration, TextStyle? hintStyle, EdgeInsets? padding, Color? focusedBorderColor = Colors.black54, Color? borderColor = Colors.grey, double? borderWidth = 0.4, double? focusedBorderWidth = 0.4, double? borderRadius = 12.0, BorderRadiusGeometry? radiusGeometry, bool showClearIcon = true, int? maxItems, FocusNode? focusNode, MultiSelectController<T>? controller, bool searchEnabled = false, double? dropdownBorderRadius, double? dropdownMargin, Color? dropdownBackgroundColor, Color? searchBackgroundColor, String? searchLabel = 'Search', })

MultiSelectDropDown is a widget that allows the user to select multiple options from a list of options. It is a dropdown that allows the user to select multiple options.

Selection Type

selectionType is the type of selection that the user can make. The default is SelectionType.single.

• SelectionType.single - allows the user to select only one option.
• SelectionType.multi - allows the user to select multiple options.

Options

options is the list of options that the user can select from. The options need to be of type ValueItem.

selectedOptions is the list of options that are pre-selected when the widget is first displayed. The options need to be of type ValueItem.

disabledOptions is the list of options that the user cannot select. The options need to be of type ValueItem. If the items in this list are not available in options, will be ignored.

onOptionSelected is the callback that is called when an option is selected or unselected. The callback takes one argument of type List<ValueItem>.

Selected Option

selectedOptionIcon is the icon that is used to indicate the selected option.

selectedOptionTextColor is the color of the selected option.

selectedOptionBackgroundColor is the background color of the selected option.

selectedItemBuilder is the builder that is used to build the selected option. If this is not provided, the default builder is used.

Chip Configuration

showChipInSingleSelectMode is used to show the chip in single select mode. The default is false.

chipConfig is the configuration for the chip.

Options Configuration

optionsBackgroundColor is the background color of the options. The default is Colors.white.

optionTextStyle is the text style of the options.

optionSeperator is the seperator between the options.

dropdownHeight is the height of the dropdown options. The default is 200.

Dropdown Configuration

fieldBackgroundColor is the background color of the dropdown. The default is Colors.white.

suffixIcon is the icon that is used to indicate the dropdown. The default is Icons.arrow_drop_down.

inputDecoration is the decoration of the dropdown.

dropdownHeight is the height of the dropdown. The default is 200.

Hint

hint is the hint text to be displayed when no option is selected.

hintColor is the color of the hint text. The default is Colors.grey.shade300.

hintFontSize is the font size of the hint text. The default is 14.0.

hintStyle is the style of the hint text.

Example

 final List<ValueItem> options = [
    ValueItem(label: 'Option 1', value: '1'),
    ValueItem(label: 'Option 2', value: '2'),
    ValueItem(label: 'Option 3', value: '3'),
  ];

  final List<ValueItem> selectedOptions = [
    ValueItem(label: 'Option 1', value: '1'),
  ];

  final List<ValueItem> disabledOptions = [
    ValueItem(label: 'Option 2', value: '2'),
  ];

 MultiSelectDropDown(
   onOptionSelected: (option) {},
   options: const <ValueItem>[
      ValueItem(label: 'Option 1', value: '1'),
      ValueItem(label: 'Option 2', value: '2'),
      ValueItem(label: 'Option 3', value: '3'),
      ValueItem(label: 'Option 4', value: '4'),
      ValueItem(label: 'Option 5', value: '5'),
      ValueItem(label: 'Option 6', value: '6'),
   ],
   selectionType: SelectionType.multi,
   selectedOptions: selectedOptions,
   disabledOptions: disabledOptions,
   onOptionSelected: (List<ValueItem> selectedOptions) {
     debugPrint('onOptionSelected: $option');
   },
   chipConfig: const ChipConfig(wrapType: WrapType.scroll),
   );

Implementation

const MultiSelectDropDown(
    {Key? key,
    required this.onOptionSelected,
    required this.options,
    this.onOptionRemoved,
    this.selectedOptionTextColor,
    this.chipConfig = const ChipConfig(),
    this.selectionType = SelectionType.multi,
    this.hint = 'Select',
    this.hintColor = Colors.grey,
    this.hintFontSize = 14.0,
    this.selectedOptions = const [],
    this.disabledOptions = const [],
    this.alwaysShowOptionIcon = false,
    this.optionTextStyle,
    this.selectedOptionIcon = const Icon(Icons.check),
    this.selectedOptionBackgroundColor,
    this.optionsBackgroundColor,
    this.fieldBackgroundColor = Colors.white,
    this.dropdownHeight = 200,
    this.showChipInSingleSelectMode = false,
    this.suffixIcon = const Icon(Icons.arrow_drop_down),
    this.clearIcon = const Icon(Icons.close_outlined, size: 14),
    this.selectedItemBuilder,
    this.optionSeparator,
    this.inputDecoration,
    this.hintStyle,
    this.padding,
    this.focusedBorderColor = Colors.black54,
    this.borderColor = Colors.grey,
    this.borderWidth = 0.4,
    this.focusedBorderWidth = 0.4,
    this.borderRadius = 12.0,
    this.radiusGeometry,
    this.showClearIcon = true,
    this.maxItems,
    this.focusNode,
    this.controller,
    this.searchEnabled = false,
    this.dropdownBorderRadius,
    this.dropdownMargin,
    this.dropdownBackgroundColor,
    this.searchBackgroundColor,
    this.searchLabel = 'Search'})
    : networkConfig = null,
      responseParser = null,
      responseErrorBuilder = null,
      super(key: key);