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(() {});
}
),
),
)
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];
});
}),
),
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With