A 1Flutter Dropdown library which is customize flutter dropdownbutton widget

flutter dropdown_below

a flutter dropdown library which is customize flutter dropdownbutton widget.

options

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.