Flutter DropdownSearch
Flutter simple and robust DropdownSearch with item search feature, making it possible to use an offline item list or filtering URL for easy customization.
Key Features • Examples • License
Key Features
- Sync and/or Async items (online, offline, DB, ...)
- Searchable dropdown
- Three dropdown mode: Menu/ BottomSheet/ Dialog
- Single & multi selection
- Material dropdown
- Easy customizable UI
- Handle Light and Dark theme
- Easy implementation into statelessWidget
packages.yaml
dropdown_search:
Import
import 'package:dropdown_search/dropdown_search.dart';
Simple implementation
s.startsWith('I'), onChanged: print, selectedItem: "Brazil"), DropdownSearch
.multiSelection( mode: Mode.MENU, showSelectedItem: true, items: ["Brazil", "Italia (Disabled)", "Tunisia", 'Canada'], label: "Menu mode", hint: "country in menu mode", popupItemDisabled: (String s) => s.startsWith('I'), onChanged: print, selectedItems: ["Brazil"]),">
DropdownSearch<String>( mode: Mode.MENU, showSelectedItem: true, items: ["Brazil", "Italia (Disabled)", "Tunisia", 'Canada'], label: "Menu mode", hint: "country in menu mode", popupItemDisabled: (String s) => s.startsWith('I'), onChanged: print, selectedItem: "Brazil"), DropdownSearch<String>.multiSelection( mode: Mode.MENU, showSelectedItem: true, items: ["Brazil", "Italia (Disabled)", "Tunisia", 'Canada'], label: "Menu mode", hint: "country in menu mode", popupItemDisabled: (String s) => s.startsWith('I'), onChanged: print, selectedItems: ["Brazil"]),
customize showed field (itemAsString)
getData(filter), itemAsString: (UserModel u) => u.userAsStringByName(), onChanged: (UserModel data) => print(data), ), DropdownSearch
( label: "Name", onFind: (String filter) => getData(filter), itemAsString: (UserModel u) => u.userAsStringById(), onChanged: (UserModel data) => print(data), ),">
DropdownSearch<UserModel>( label: "Name", onFind: (String filter) => getData(filter), itemAsString: (UserModel u) => u.userAsStringByName(), onChanged: (UserModel data) => print(data), ), DropdownSearch<UserModel>( label: "Name", onFind: (String filter) => getData(filter), itemAsString: (UserModel u) => u.userAsStringById(), onChanged: (UserModel data) => print(data), ),
customize Filter Function
user.userFilterByCreationDate(filter), onFind: (String filter) => getData(filter), itemAsString: (UserModel u) => u.userAsStringByName(), onChanged: (UserModel data) => print(data), ),">
DropdownSearch<UserModel>( label: "Name", filterFn: (user, filter) => user.userFilterByCreationDate(filter), onFind: (String filter) => getData(filter), itemAsString: (UserModel u) => u.userAsStringByName(), onChanged: (UserModel data) => print(data), ),
customize Search Mode
getData(filter), itemAsString: (UserModel u) => u.userAsString(), onChanged: (UserModel data) => print(data), ),">
DropdownSearch<UserModel>( mode: Mode.BOTTOM_SHEET, label: "Name", onFind: (String filter) => getData(filter), itemAsString: (UserModel u) => u.userAsString(), onChanged: (UserModel data) => print(data), ),
Validation
DropdownSearch(
items: ["Brazil", "France", "Tunisia", "Canada"],
label: "Country",
onChanged: print,
selectedItem: "Tunisia",
validator: (String item) {
if (item == null)
return "Required field";
else if (item == "Brazil")
return "Invalid item";
else
return null;
},
);
Endpoint implementation (using Dio package)
DropdownSearch<UserModel>(
label: "Name",
onFind: (String filter) async {
var response = await Dio().get(
"http://5d85ccfb1e61af001471bf60.mockapi.io/user",
queryParameters: {"filter": filter},
);
var models = UserModel.fromJsonList(response.data);
return models;
},
onChanged: (UserModel data) {
print(data);
},
);
Layout customization
You can customize the layout of the DropdownSearch and its items. EXAMPLE
Full documentation here
Attention
To use a template as an item type, and you don't want to use a custom function itemAsString and compareFn you need to implement toString, equals and hashcode, as shown below:
fromJsonList(List list) { if (list == null) return null; return list.map((item) => UserModel.fromJson(item)).toList(); } ///this method will prevent the override of toString String userAsString() { return '#${this.id} ${this.name}'; } ///this method will prevent the override of toString bool userFilterByCreationDate(String filter) { return this?.createdAt?.toString()?.contains(filter); } ///custom comparing function to check if two users are equal bool isEqual(UserModel model) { return this?.id == model?.id; } @override String toString() => name; }">
class UserModel { final String id; final DateTime createdAt; final String name; final String avatar; UserModel({this.id, this.createdAt, this.name, this.avatar}); factory UserModel.fromJson(Map<String, dynamic> json) { if (json == null) return null; return UserModel( id: json["id"], createdAt: json["createdAt"] == null ? null : DateTime.parse(json["createdAt"]), name: json["name"], avatar: json["avatar"], ); } static List<UserModel> fromJsonList(List list) { if (list == null) return null; return list.map((item) => UserModel.fromJson(item)).toList(); } ///this method will prevent the override of toString String userAsString() { return '#${this.id} ${this.name}'; } ///this method will prevent the override of toString bool userFilterByCreationDate(String filter) { return this?.createdAt?.toString()?.contains(filter); } ///custom comparing function to check if two users are equal bool isEqual(UserModel model) { return this?.id == model?.id; } @override String toString() => name; }
View more Examples
Support
If this plugin was useful to you, helped you to deliver your app, saved you a lot of time, or you just want to support the project, I would be very grateful if you buy me a cup of coffee.
License
MIT
3 Dec 7, 2020
6 Jun 20, 2022
7 Dec 7, 2022
1.1k Jan 7, 2023
32 Oct 8, 2022
116 Dec 21, 2022
0 Apr 16, 2022
0 May 6, 2022
2.6k Dec 29, 2022
1.2k Jan 3, 2023
281 Dec 27, 2022
14 Oct 20, 2022
4 Oct 9, 2022
43 Dec 7, 2022
97 Jan 5, 2023
13 Oct 18, 2022
404 Dec 26, 2022
106 Dec 12, 2022
46 Nov 21, 2022