/multiselect-dropdown

Streamlined Flutter widget for versatile multi-selection with extensive customization.

Primary LanguageDartGNU General Public License v3.0GPL-3.0

MultiSelect Dropdown

Pub Version License GitHub issues Very Good Analysis Flutter Dart

The MultiSelect Dropdown for Flutter is a powerful and customizable widget that empowers you to effortlessly manage and search through multiple items in a dropdown list. Customize the dropdown with your own style, and use the controller to programmatically control the dropdown.

Breaking Changes in v3.0.0

  • The MultiSelectDropDown widget has been renamed to MultiDropdown, which now supports FormValidation.
  • The MultiSelectController methods have been updated/renamed.
  • The ValueItem class has replaced the DropdownItem class.
  • The .network constructor has been removed and has been replaced with the future constructor, which accepts a future callback to fetch the data from the server. Use it to handle future your own way.
  • onOptionsSelected has been replaced with onSelectionChange. The onSelectionChange callback is called whenever the selection changes in the dropdown, whether it is selected or deselected.
  • A lot of parameters have been renamed and updated. Please check the documentation for the updated parameters.

Links

Preview | Controller | Parameters

Preview

Controller

You can use the controller to programmatically select/unselect items, clear the selection, and get the selected items, set disabled items, show/hide the dropdown. It is still in beta, will be stable in the next release.

final MultiSelectController<User> _controller = MultiSelectController<User>();

_controller.clearAll(); /// Clear all selected items

_controller.selectWhere(bool Function(DropdownItem<User>) predicate); /// Select items based on a predicate

_controller.setItems(List<DropdownItem<User>> options); /// Set items of the dropdown

_controller.addItem(DropdownItem<User> option); /// Add item to dropdown

_controller.addItems(List<DropdownItem<User>> options); /// Add  items to dropdown

_controller.disableWhere(bool Function(DropdownItem<User>) predicate); /// Disable items based on a predicate

_controller.selectAll(); /// Select all items

_controller.selectAtIndex(int index); /// Select item at index

_controller.selectWhere(bool Function(DropdownItem<User>) predicate); /// Select items based on a predicate

_controller.deselectWhere(bool Function(DropdownItem<User>) predicate); /// Deselect items based on a predicate

_controller.items; /// Get all items

_controller.selectedItems; /// Get selected items

_controller.disabledItems; /// Get disabled items

_controller.openDropdown(); /// Show the dropdown

_controller.closeDropdown(); /// Hide the dropdown if it is open

Parameters

MultiDropdown

Parameter Type Description Default
items List<DropdownItem> The list of dropdown items. Required
singleSelect bool The selection type of the dropdown. false
chipDecoration ChipDecoration The configuration for the chips. ChipDecoration()
fieldDecoration FieldDecoration The decoration of the field. FieldDecoration()
dropdownDecoration DropdownDecoration The decoration of the dropdown. DropdownDecoration()
searchDecoration SearchFieldDecoration The decoration of the search field. SearchFieldDecoration()
dropdownItemDecoration DropdownItemDecoration The decoration of the dropdown items. DropdownItemDecoration()
itemBuilder DropdownItemBuilder? The builder for the dropdown items. null
selectedItemBuilder SelectedItemBuilder? The builder for the selected items. null
itemSeparator Widget? The separator between the dropdown items. null
validator String? Function(List<DropdownItem>? selectedOptions)? The validator for the dropdown. null
autovalidateMode AutovalidateMode The autovalidate mode for the dropdown. AutovalidateMode.disabled
controller MultiSelectController? The controller for the dropdown. null
maxSelections int The maximum number of selections allowed. 0
enabled bool Whether the dropdown is enabled. true
searchEnabled bool Whether the search field is enabled. false
focusNode FocusNode? The focus node for the dropdown. null
future FutureRequest? The future request for the dropdown items. null
onSelectionChange OnSelectionChanged? The callback when the item is changed. null
closeOnBackButton bool Closes the dropdown on back button false
onSearchChange ValueChanged? The callback when the search text changes. null

DropdownItem

Parameter Type Description Default
label String The label of the dropdown item. Required
value T The value associated with the dropdown item. Required
disabled bool Indicates whether the dropdown item is disabled. false
selected bool Indicates whether the dropdown item is selected. false

ChipDecoration

Parameter Type Description Default
deleteIcon Icon The icon to display for deleting a chip. Icon(Icons.close)
backgroundColor Color The background color of the chip. Colors.blue
labelStyle TextStyle The style of the chip label. TextStyle()
padding EdgeInsets The padding around the chip. EdgeInsets.all(8.0)
border BoxBorder The border of the chip. Border()
spacing double The spacing between chips. 8.0
runSpacing double The spacing between chip rows (when the chips wrap). 8.0
borderRadius BorderRadiusGeometry The border radius of the chip. BorderRadius.circular(12)
wrap bool Whether to wrap chips or scroll them. true

FieldDecoration

Parameter Type Description Default
labelText String? The label text to display above the dropdown field. null
hintText String? The hint text to display in the dropdown field. null
border InputBorder? The border of the dropdown field. null
focusedBorder InputBorder? The border of the dropdown field when it is focused. null
disabledBorder InputBorder? The border of the dropdown field when it is disabled. null
errorBorder InputBorder? The border of the dropdown field when there is an error. null
suffixIcon Widget? The icon to display at the end of the dropdown field. Icon(Icons.arrow_drop_down)
prefixIcon Widget? The icon to display at the start of the dropdown field. null
labelStyle TextStyle? The style of the label text. null
hintStyle TextStyle? The style of the hint text. null
borderRadius double The border radius of the dropdown field. 8.0
animateSuffixIcon bool Animate the icon or not. true
padding EdgeInsets? Padding around the dropdown field. null
showClearIcon bool Show the clear icon or not. true

DropdownDecoration

Parameter Type Description Default
backgroundColor Color The background color of the dropdown. Colors.white
elevation double The elevation of the dropdown. 1.0
maxHeight double The max height of the dropdown. 400.0
borderRadius BorderRadius The border radius of the dropdown. BorderRadius.circular(12.0)
marginTop double The margin top of the dropdown. 0.0
header Widget? The header of the dropdown. null
footer Widget? The footer of the dropdown. null

SearchFieldDecoration

Parameter Type Description Default
hintText String The hint text to display in the search field. 'Search'
border InputBorder? The border of the search field. null
focusedBorder InputBorder? The border of the search field when it is focused. null
searchIcon Icon The icon to display in the search field. Icon(Icons.search)

DropdownItemDecoration

Parameter Type Description Default
backgroundColor Color The background color of the dropdown item. null
disabledBackgroundColor Color The background color of the disabled dropdown item. null
selectedBackgroundColor Color The background color of the selected dropdown item. null
selectedTextColor Color The text color of the selected dropdown item. null
textColor Color The text color of the dropdown item. null
disabledTextColor Color The text color of the disabled dropdown item. null
selectedIcon Icon The icon to display for the selected dropdown item. null
disabledIcon Icon The icon to display for the disabled dropdown item. null