Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to achieve this design of Dropdown in flutter

this is design of dropdown button

i want to achieve this design of dropdown but not sure how to get this type of dropdown i have tried doing this

 Container(
             padding: EdgeInsets.all(10.0),
             child: DropdownButtonHideUnderline(
               child: DropdownButton<String>(
                  items:_locations.map((String val){
                    return DropdownMenuItem<String>(
                      value: val,
                      child: Container(
                          margin: EdgeInsets.only(left: 10.0,right: 10.0),
                          child: new Text(val)
                      ),
                    );
                  }).toList(),
                  hint:Text(_SelectdType),
                  onChanged:(String val){
                    _SelectdType = val;
                    setState(() {});
                  }
           ),
             ),
           )
like image 955
shakil.k Avatar asked Aug 01 '18 14:08

shakil.k


1 Answers

The hint for the DropdownButton and the child for the DropdownMenuItem are just widgets like everything else, so you can put whatever you want in there.

This example uses a Map to supply the text and icons:

final Map<String, IconData> _data = Map.fromIterables(
    ['First', 'Second', 'Third'],
    [Icons.filter_1, Icons.filter_2, Icons.filter_3]);
String _selectedType;
IconData _selectedIcon;
...

Container(
  padding: EdgeInsets.all(10.0),
  child: DropdownButtonHideUnderline(
    child: DropdownButton<String>(
        items: _data.keys.map((String val) {
          return DropdownMenuItem<String>(
            value: val,
            child: Row(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 10.0),
                  child: Icon(_data[val]),
                ),
                Text(val),
              ],
            ),
          );
        }).toList(),
        hint: Row(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 12.0),
              child:
                  Icon(_selectedIcon ?? _data.values.toList()[0]),
            ),
            Text(_selectedType ?? _data.keys.toList()[0]),
          ],
        ),
        onChanged: (String val) {
          setState(() {
            _selectedType = val;
            _selectedIcon = _data[val];
          });
        }),
  ),
),
like image 85
Derek Lakin Avatar answered Sep 20 '22 10:09

Derek Lakin