advanced_dropdown 2.0.4
advanced_dropdown: ^2.0.4 copied to clipboard
A customizable Flutter dropdown with search, single-select, and multi-select support.
πΈ Screenshots #
Custom Decoration | Single Select | Single Select with Search | Multi Select | Multi Select with Search |
---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
π§© Custom Dropdown for Flutter #
A fully customizable dropdown widget for Flutter that supports single-select, multi-select, and search β all in one widget.
Lightweight, flexible, and easy to integrate into any Flutter project.
π± Platform Support #
Platform | Supported | Tested |
---|---|---|
Android | β | β |
iOS | β | β |
Web | β | β |
Windows | β | βοΈ |
macOS | β | βοΈ |
Linux | β | βοΈ |
π‘ Works with Flutter 3.0+ and Dart 3.0+
β¨ Features #
β
Single Select (default) β behaves like a normal dropdown
β
Multi Select β users can select multiple items
β
Searchable Dropdown β optional search bar for filtering
β
Flexible Decoration β customize dropdown and list appearance
β
Custom InputDecoration for search bar
β
Auto position below the button
β
Lightweight (~3 KB compressed)
β
No external dependencies
β
Custom Dropdown Button Design
β
Custom Dropdown Icon
βοΈ Customization Options #
Below is a complete list of customizable properties available in the AdvancedDropdown
widget.
Property | Type | Required | Default | Description |
---|---|---|---|---|
items | List<dynamic> List<Map<String, dynamic>> |
β Yes | β | The list of items to display in the dropdown. Supports both plain List<String> and complex List<Map<String, dynamic>> . |
onChanged | Function(dynamic) |
β Yes | β | Callback triggered when a selection changes. Returns a single value (for single select) or a list (for multi-select). |
isSearch | bool |
β No | false |
Enables a search bar for filtering dropdown items. |
isMultiSelect | bool |
β No | false |
Enables multiple selection mode with checkboxes and removable chips. |
labelBuilder | String Function(dynamic)? |
β No | null |
Defines how to display text for each dropdown item (especially for Map data). Example: (item) => item['label'] . |
valueBuilder | dynamic Function(dynamic)? |
β No | null |
Defines the actual value used in selection logic. Example: (item) => item['value'] . |
initialValue | dynamic |
β No | null |
Preselects a value for single-select dropdowns β ideal for restoring saved data. |
initialValues | List<dynamic>? |
β No | null |
Preselects multiple values for multi-select dropdowns β ideal for restoring saved user preferences. |
maxSelection | int? |
β No | null |
Sets a limit for maximum selected items in multi-select mode. Displays a SnackBar when exceeded. |
decoration | BoxDecoration? |
β No | null |
Customizes the main dropdown button (border, color, shape, etc.). |
dropdownDecoration | BoxDecoration? |
β No | null |
Styles the dropdown popup container. |
inputDecoration | InputDecoration? |
β No | null |
Customizes the search fieldβs appearance and behavior. |
icon | Icon? |
β No | Icon(Icons.arrow_drop_down) |
The dropdown icon displayed beside the main button. |
hintText | String? |
β No | "Select item" |
Text displayed when no item is selected. |
hintStyle | TextStyle? |
β No | null |
Custom text style for the hint text. |
itemTextStyle | TextStyle? |
β No | null |
Text style for dropdown list items. |
selectedTextStyle | TextStyle? |
β No | null |
Text style for selected item(s) inside the main dropdown. |
chipColor | Color |
β No | Color(0xFFD0E6FF) |
Background color for chips in multi-select mode. |
chipTextColor | Color |
β No | Colors.black |
Default text color for chip labels. |
chipTextStyle | TextStyle? |
β No | null |
Allows full customization of chip text (font, size, weight, etc.). |
chipRemoveIconColor | Color |
β No | Colors.black54 |
Color for the chipβs remove (Γ) icon. |
key | Key? |
β No | null |
Standard Flutter key for widget identification or testing. |
π‘ Notes #
- Use labelBuilder and valueBuilder for complex data structures (List<Map<String, dynamic>>).
- initialValue and initialValues are perfect for restoring selections when reloading saved data.
- You can mix and match text styles (hintStyle, itemTextStyle, chipTextStyle) for full design flexibility.
- Default mode = Single Select
- When
isMultiSelect: true
, theonChanged
callback returns a List of selected items. - Dropdown automatically opens below the button.
- The dropdown closes automatically when clicking outside its overlay area.
- You can style everything (dropdown, button, list, search bar).
- Works seamlessly with light and dark themes.