MultiCheckDropdownSearch

A customizable multi-select dropdown with search for Flutter.

📌 Features

✅ Select multiple items with checkboxes
✅ Built-in search functionality
✅ Customizable styles (dropdown, selected items, search box)
✅ Supports pre-selected items
✅ Works inside overlay for better UX

Both alias and fieldKey are used to reference keys in the provided list of items, but they serve different purposes:

fieldKey (Primary Key for Selection)

Defines the key in each item map that is used for selection and identification. Ensures uniqueness when selecting items. Used in _toggleSelection and _toggleSelectAll to check if an item is selected. alias (Display Name)

Defines the key in each item map that holds the display name shown in the dropdown. Used for displaying selected items and filtering items in _filterItems.

MultiCheckDropdown Documentation

Parameters

items

A list of items to display in the dropdown, each represented as a map containing key-value pairs.

Example:

List<Map<String, dynamic>> items = [
  {"id": 1, "name": "Apple"},
  {"id": 2, "name": "Banana"},
];

onSelectionChanged

Callback function triggered when selected items change, returning the list of selected items.

Example:

MultiCheckDropdown(
  items: items,
  onSelectionChanged: (selectedItems) {
    print(selectedItems);
  },
);

width

Defines the width of the dropdown button. If not provided, it takes the default width.

Example:

MultiCheckDropdown(width: 250);

fieldKey

Specifies the unique key in the map used to track selections (e.g., id for uniqueness).

Example:

MultiCheckDropdown(fieldKey: "id");

initialSelectedItems

List of pre-selected items that appear selected when the dropdown opens.

Example:

MultiCheckDropdown(initialSelectedItems: [{"id": 1, "name": "Apple"}]);

alias

Defines the key in the map used for display purposes in the dropdown.

Example:

MultiCheckDropdown(alias: "name");

Defines the text style for the dropdown items, such as color and font size.

Example:

MultiCheckDropdown(dropdownTextStyle: TextStyle(color: Colors.white));

noResultMessageStyle

Style for the "No Result Found" message when searching returns no items.

Example:

MultiCheckDropdown(noResultMessageStyle: TextStyle(color: Colors.red));

hintTextStyle

Style for the hint text in the search box inside the dropdown menu.

Example:

MultiCheckDropdown(hintTextStyle: TextStyle(color: Colors.grey));

Style for the placeholder text when no item is selected.

Example:

MultiCheckDropdown(dropdownPlaceholderStyle: TextStyle(fontSize: 14));

columselectedText

Text displayed when multiple items are selected (e.g., "3 items selected").

Example:

MultiCheckDropdown(columselectedText: "selected");

hinttext

Placeholder text displayed inside the dropdown button before selection.

Example:

MultiCheckDropdown(hinttext: "Choose your items");

backgroundColor

Background color of the dropdown button.

Example:

MultiCheckDropdown(backgroundColor: Colors.black);

backgroundColorSecond

Background color of the dropdown menu when expanded.

Example:

MultiCheckDropdown(backgroundColorSecond: Colors.grey[800]!);

shouldUpdate

Boolean flag that forces a widget update when needed.

Example:

MultiCheckDropdown(shouldUpdate: true);

left & top

Custom positioning values for dropdown placement on the screen.

Example:

MultiCheckDropdown(left: 50, top: 100);

activeCheckColor

Color of the checkbox when an item is selected.

Example:

MultiCheckDropdown(activeCheckColor: Colors.blue);

unCheckColor

Color of the checkbox when an item is not selected.

Example:

MultiCheckDropdown(unCheckColor: Colors.white);

📦 Installation

Add this package to your pubspec.yaml:

dependencies:
  multi_check_dropdown_search: ^1.0.0

Libraries