I want to add icon to left of DropDownButton
but can't find a way to do so.
What I want to achieve is like this:
I have tried following code but it places icon to right where I don't want it and it also overrides arrow icon:
`@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
margin: EdgeInsets.only(top: 64.0, left: 16.0, right: 16.0),
color: Colors.white,
child: DropdownButton(
icon: Icon(
Icons.person,
color: Colors.redAccent,
size: 20.09,
),
isExpanded: true,
items: _studentList.map((val) {
return DropdownMenuItem(
value: val,
child: Text(val),
);
}).toList(),
value: _currentSelectedItem,
onChanged: (value) {
setState(() {
_currentSelectedItem = value;
});
},
),
),
);
}`
Output of above code is like this:
I have also tried to place Icon()
and DropDownButton()
inside Row()
widget but that does not allow the DropDownButton()
to expand to full width.
Any help would be appreciated.
Thanks
To change the dropdown Button color in Flutter, simply wrap your DropdownButton widget inside the Container and provide the styling instructions inside the decoration property using the BoxDecoration widget.
Setting the Width for a Dropdown Button You can set the width for a DropdownButton by setting its isExpanded parameter to true and wrapping it inside a fixed-size Container or SIzedBox.
There is no specific attribute for adding icon the way you want but you can always work around your code and find some tweaks. Use the following code which will place you Icon()
on top of your DropDownButton()
button.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 20.0,
spreadRadius: 0.5,
offset: Offset(1.0, 1.0),
),
],
),
padding: EdgeInsets.only(left: 44.0),
margin: EdgeInsets.only(top: 64.0, left: 16.0, right: 16.0),
child: DropdownButton(
isExpanded: true,
items: your_list.map(
(val) {
return DropdownMenuItem(
value: val,
child: Text(val),
);
},
).toList(),
value: _currentSelectedItem,
onChanged: (value) {
setState(() {
_currentSelectedItem = value;
});
},
),
),
Container(
margin: EdgeInsets.only(top: 80.0, left: 28.0),
child: Icon(
Icons.person,
color: Colors.redAccent,
size: 20.0,
),
),
],
),
);
}
Use DropdownButtonFormField as it has decoration property. You can use prefixIcon attribute to set icon on left side.
Example:
DropdownButtonFormField<String>(
decoration: InputDecoration(
prefixIcon: Icon(Icons.person),
),
hint: Text('Please choose account type'),
items: <String>['A', 'B', 'C', 'D'].map((String value) {
return DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (_) {},
),
Result:
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