How to achieve this design of Dropdown in flutter - dart

Question

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(() {});
}
),
),
)

Answer 1

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];
});
}),
),
),

Answer 2

You can use a Row to build your DropdownMenuItem.
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
#override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
String dropdownValue = 'One';
#override
Widget build(BuildContext context) {
return DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.redAccent,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Row(children: [
IconButton(
icon: Icon(Icons.home),
color: Colors.redAccent,
),
Text(value),
]),
);
}).toList(),
);
}
}

Answer 3

You can use it like:
import 'package:flutter/material.dart';
class SettingsWidget extends StatefulWidget {
SettingsWidget({Key key}) : super(key: key);
#override
_SettingsWidgetState createState() => new _SettingsWidgetState();
}
class _SettingsWidgetState extends State<SettingsWidget> {
List _cities =
["Cluj-Napoca", "Bucuresti", "Timisoara", "Brasov", "Constanta"];
List<DropdownMenuItem<String>> _dropDownMenuItems;
String _currentCity;
#override
void initState() {
_dropDownMenuItems = getDropDownMenuItems();
_currentCity = _dropDownMenuItems[0].value;
super.initState();
}
List<DropdownMenuItem<String>> getDropDownMenuItems() {
List<DropdownMenuItem<String>> items = new List();
for (String city in _cities) {
items.add(new DropdownMenuItem(
value: city,
child: new Text(city)
));
}
return items;
}
#override
Widget build(BuildContext context) {
return new Container(
color: Colors.white,
child: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text("Please choose your city: "),
new Container(
padding: new EdgeInsets.all(16.0),
),
new DropdownButton(
value: _currentCity,
items: _dropDownMenuItems,
onChanged: changedDropDownItem,
)
],
)
),
);
}
void changedDropDownItem(String selectedCity) {
setState(() {
_currentCity = selectedCity;
});
}
}