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
- online and offline items
- searchable dropdown
- three dropdown mode: menu/ bottomsheet/ dialog
- material dropdown
- easy customizable ui
- handle light and dark theme
- easy implementation into statelesswidget
packages.yaml
dropdown_search: <lastest version>
import
import 'package:dropdown_search/dropdown_search.dart';
simple implementation
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"),
customize showed field (itemasstring)
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
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
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
| properties | description |
|---|---|
label |
dropdownsearch label |
showsearchbox |
show/hide the search box |
isfilteredonline |
true if the filter on items is applied onlie (via api) |
showclearbutton |
show/hide clear selected item |
items |
offline items list |
selecteditem |
selected item |
onfind |
function that returns item from api |
onchanged |
called when a new item is selected |
dropdownbuilder |
to customize list of items ui |
popupitembuilder |
to customize selected item |
validator |
function to apply the validation formula |
searchboxdecoration |
decoration for the search box |
popupbackgroundcolor |
background color for the dialog/menu/bottomsheet |
popuptitle |
custom widget for the popup title |
itemasstring |
customize the fields the be shown |
filterfn |
custom filter function |
enabled |
enable/disable dropdownsearch |
mode |
menu / dialog/ bottom_sheet |
maxheight |
the max height for dialog/bottomsheet/menu |
dialogmaxwidth |
the max width for the dialog |
showselecteditem |
manage selected item visibility (if true, the selected item will be highlighted) |
comparefn |
function(t item, t selecteditem), custom comparing function |
dropdownsearchdecoration |
dropdownsearch input decoration |
emptybuilder |
custom layout for empty results |
loadingbuilder |
custom layout for loading items |
errorbuilder |
custom layout for error |
autofocussearchbox |
the search box will be focused if true |
popupshape |
custom shape for the popup |
autovalidatemode |
handle auto validation mode |
onsaved |
an optional method to call with the final value when the form is saved via |
validator |
an optional method that validates an input. returns an error string to display if the input is invalid, or null otherwise. |
clearbutton |
customize clear button widget |
dropdownbutton |
customize dropdown button widget |
dropdownbuildersupportsnullitem |
if true, the dropdownbuilder will continue the uses of material behavior. this will be useful if you want to handle a custom ui only if the item !=null |
popupitemdisabled |
defines if an item of the popup is enabled or not, if the item is disabled, it cannot be clicked |
popupbarriercolor |
set a custom color for the popup barrier |
searchboxcontroller |
search box controller |
clearbuttonbuilder |
custom clear button builder |
dropdownbuttonbuilder |
custom dropdown button builder |
onbeforechange |
callback executed before applying value change |
searchdelay |
delay before searching |
attention
to use a template as an item type, and you don’t want to use a custom fonction itemasstring and comparefn you need to implement tostring, equals and hashcode, as shown below:
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;
}
Comments are closed.