dropdown_pro

Single or Multi Selection Dropdown with search dropdown item, and easy to customization.

Using

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile and web development, and a full API reference.

Installation

First, add dropdown_pro as a dependency in your pubspec.yaml file.

In your flutter project add the dependency:

dependencies:
  ...
  dropdown_pro:

For help getting started with Flutter, view the online documentation.

Example

Please follow this example here.

Dropdown - Single Selection and Multi Selection

  1. Declare variables
List<DropdownItem> _itemList = [];
String _singleSelectedId = ""; //for single selection dropdown
final List<String> _mutiSelectedIds = []; //for multi selection dropdown
  1. Generate your item list
_generateItems() {
  List<DropdownItem> list = [];
  for (int i = 1; i <= 20; i++) {
    list.add(DropdownItem(
        id: "$i",
        value: "Item $i",
        data: User(userId: "$i", userName: "User $i") /* User class is another data class (use any datatype in data field )*/
    ));
  }
  setState(() {
    _itemList = list;
  });
}
  1. Put Dropdown in your build function
  • Single Selection Dropdown
Dropdown.singleSelection(
  title: "Single Selection Dropdown",
  labelText: "Single",
  hintText: "Single Selection",
  list: _itemList,
  selectedId: _singleSelectedId,
  isAddItem: true,
  onTapAddItem: (searchValue) {
    log(searchValue);
  },
  onSingleItemListener: (selectedItem) {
    setState(() {
      _singleSelectedId = selectedItem.id;
    });
    String itemId = selectedItem.id;
    String itemName = selectedItem.value;
    User user = selectedItem.data as User;
    log("Item Id: $itemId -- Item Name: $itemName ## Other Details ## User Id: ${user.userId} -- User Name: ${user.userName}");
})
  • Multi Selection Dropdown
Dropdown.multiSelection(
  title: "Multi Selection Dropdown",
  labelText: "Multi",
  hintText: "Multi Selection",
  list: _itemList,
  selectedIds: _mutiSelectedIds,
  isAllSelection: true,
  isAddItem: true,
  onTapAddItem: (searchValue) {
    log(searchValue);
  },
  onMultipleItemListener: (selectedItemList) {
    for (DropdownItem selectedItem in selectedItemList) {
      String itemId = selectedItem.id;
      String itemName = selectedItem.value;
      User user = selectedItem.data as User;
      log("Item Id: $itemId -- Item Name: $itemName ## Other Details ## User Id: ${user.userId} -- User Name: ${user.userName}");
    }
})
  • Dropdown with TextField
DropdownTextField(
  controller: _conDropdownTextField,
  list: _itemList,
  hintText: "Item search",
  labelText: "Item search"
),

Libraries