flutter_multi_select_dropdown 1.0.0
SDKflutter
Platformandroidioswindowslinuxmacos
A customizable multi-select dropdown for Flutter applications.
MultiSelect Dropdown
The Flutter 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.
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 | 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 |