Description:

flutter dropdown plus

flutter_dropdown_plus #
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 flutter_dropdown_plus as a dependency in your pubspec.yaml file.
In your flutter project add the dependency:
dependencies:
...
flutter_dropdown_plus:
copied to clipboard
For help getting started with Flutter, view the online
documentation.
Example #
Please follow this example here.
Dropdown - Single Selection and Multi Selection #

Declare variables

List<DropdownItem> _itemList = [];
String _singleSelectedId = ""; //for single selection dropdown
List<String> _multiSelectedIds = []; //for multi selection dropdown
copied to clipboard

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 (data: use any datatype field )*/
));
}
setState(() {
_itemList = list;
});
}
copied to clipboard

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}");
})
copied to clipboard

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}");
}
})
copied to clipboard

Dropdown with TextField

DropdownTextField(
controller: _conDropdownTextField,
list: _itemList,
hintText: "Item search",
labelText: "Item search"
),
copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter