Reputation: 3079
How to change Dropdown arrow color?
Here is what I want:
This is what I get
My widget:
DropdownButtonHideUnderline (
child: DropdownButton<String>(
isExpanded: true,
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['Bank Deposit', 'Mobile Payment', 'Cash Pickup']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
})
.toList(),
),
),
I tried wrapping with Theme and changing Brightness, but it changes arrow from White to Black only. I want to use some other color.
Upvotes: 9
Views: 11287
Reputation: 3079
Thanks to @anmol.majhail, anyway found something simpler using iconEnabledColor property.
DropdownButtonHideUnderline (
child: DropdownButton<String>(
iconEnabledColor: Colors.indigo, // game changer
isExpanded: true,
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['Bank Deposit', 'Mobile Payment', 'Cash Pickup']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
})
.toList(),
),
),
Upvotes: 5
Reputation: 51206
This can be done with icon:
property in DropdownButton
DropdownButtonHideUnderline(
child: DropdownButton<String>(
isExpanded: true,
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
hint: Text('Select'),
icon: Icon( // Add this
Icons.arrow_drop_down, // Add this
color: Colors.blue, // Add this
),
items: <String>['Bank Deposit', 'Mobile Payment', 'Cash Pickup']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
Upvotes: 30