Two ways to change Dropdown arrow color in Flutter
Changing the dropdown arrow color in Flutter can be necessary for various reasons, such as enhancing the overall user interface (UI) design, improving visibility, or ensuring consistency with the app’s color scheme. Customising the appearance of UI elements like dropdown arrows allows developers to create a more cohesive and visually appealing user experience. In this tutorial we will learn the 2 ways by which we can change color.
Method 1 : Icon Property
We can change arrow color of dropdown button by using icon property.
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(),
)
Method 2 : IconEnabledColor Property
Color of arrow can also be changed using iconEnabledColor property of DropdownButton class.
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(),
),
You can also read how to set hint of Dropdown Button in Flutter.