flutter dropdown_below
a flutter dropdown library which is customize flutter dropdownbutton widget.
options
| options | description | required |
|---|---|---|
| itemwidth | dropdown item’s box width | x |
| itemtextstyle | dropdown item’s text style | x |
| boxtextstyle | seletced box text style | x |
| boxpadding | seletced box inner padding | x |
| boxheight | seletced box height | x |
| boxwidth | seletced box width | x |
| hint | text before you choose item | x |
| value | selected item | x |
| items | itemslist | o |
| onchange | change item function | o |
how to make it work?
description for example.
1. datas
_testlist’s type is always be a list.
if you want to use map or other type, you can customize this package.
list _testlist = [{'no': 1, 'keyword': 'blue'},{'no': 2, 'keyword': 'black'},{'no': 3, 'keyword': 'red'}];
list<dropdownmenuitem> _dropdowntestitems;
var _selectedtest;
2. initstate & build items to correct type
if you want to customize item’s child widget ex) text -> container, you can change any widget you want.
@override
void initstate() {
_dropdowntestitems = builddropdowntestitems(_testlist);
super.initstate();
}
list<dropdownmenuitem> builddropdowntestitems(list _testlist) {
list<dropdownmenuitem> items = list();
for (var i in _testlist) {
items.add(
dropdownmenuitem(
value: i,
child: text(i['keyword']),
),
);
}
return items;
}
3. change function
onchangedropdowntests(selectedtest) {
print(selectedtest);
setstate(() {
_selectedtest = selectedtest;
});
}
4. ui
dropdown widget.
dropdownbelow(
itemwidth: 200,
itemtextstyle: textstyle(fontsize: 14, fontweight: fontweight.w400, color: colors.black),
boxtextstyle: textstyle(fontsize: 14, fontweight: fontweight.w400, color: color(0xffbbbbbb)),
boxpadding: edgeinsets.fromltrb(13, 12, 0, 12),
boxheight: 45,
boxwidth: 200,
hint: text('choose item'),
value: _selectedtest,
items: _dropdowntestitems,
onchanged: onchangedropdowntests,
),
5. question
if you want to make itembox dropdown when you enter the page?
put this code to initstate like this.
timer(duration(milliseconds: 200), () {
customdropdownbuttonstate state = dropdownkey1.currentstate;
state.calltap();
});
and put key to widget like this.
dropdownbelow(
key: dropdownkey1,
itemwidth: 200,
itemtextstyle: textstyle(fontsize: 14, fontweight: fontweight.w400, color: colors.black),
boxtextstyle: textstyle(fontsize: 14, fontweight: fontweight.w400, color: color(0xffbbbbbb)),
boxpadding: edgeinsets.fromltrb(13, 12, 0, 12),
boxheight: 45,
boxwidth: 200,
hint: text('choose item'),
value: _selectedtest,
items: _dropdowntestitems,
onchanged: onchangedropdowntests,
)
actually, dropdown widget is made by navigation. so, it can work.
