dropdown_below 0.0.8
dropdown_below: ^0.0.8 copied to clipboard

flutter custom dropdown box. Develeoper can customize many options for there taste. It can be huge advantage for dropdown ux

Flutter Dropdown_Below #

A Flutter Dropdown library which is customize flutter dropdownbutton widget.

license license license

###pub.dev link!

Options #

optionsdescriptiontyperequired
itemWidthdropdown item's box widthdoubleX
itemTextstyledropdown item's text styledoubleX
boxTextstyleseletced box text styleTextStyleX
boxPaddingseletced box inner paddingEdgeInsetsGeometryX
boxHeightseletced box heightdoubleX
boxWidthseletced box widthdoubleX
hinttext before you choose itemWidgetX
valueselected itemTX
boxDecorationbox's border, borderRadius, colorBoxDecorationX
iconwidget which is right besideWidgetX
itemsitemsListList<DropdownMenuItemO
onChangechange item functionValueChangedO

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.

20
likes
120
pub points
89%
popularity

Publisher

Unknown

flutter custom dropdown box. Develeoper can customize many options for there taste. It can be huge advantage for dropdown ux

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on dropdown_below