Flutter: How to set different colors for DropdownItems and for DropdownButton selected item?
2,586
If anyone still needs, by Flutter docs you can set a custom selectedItemBuilder, which means you can basically display anything you want respecting the List type. Here's an example:
var listSorted = list.map((dropdownItem) {
return DropdownMenuItem<dynamic>(
child: Text("${dropdownItem.label}",
style: TextStyle(color: Colors.black)),
value: dropdownItem.value);
}).toList();
return Container(
child: DropdownButton(
isExpanded: true,
iconEnabledColor: Colors.white,
underline: Container(
width: 200,
height: 1,
color: Colors.white,
),
value: valueToUpdate,
items: listSorted,
onChanged: onChanged,
selectedItemBuilder: (BuildContext ctxt) {
return list.map<Widget>((item) {
return DropdownMenuItem(
child: Text("${item.label}",
style: TextStyle(color: Colors.white)),
value: item.value);
}).toList();
},
dropdownColor: backgroundColor,
)));
Comments
-
1encore over 1 year
I have included
DropdownButton
in my project but I stucked with these problem.I have tried to use Theme on it but it also changes the both of colors. I can still change the background color of dropdown but I wanted it to be white with black text.
Here you can see the screens, the dropdown is white because text color is also white
AccentColorOverride( child: Theme( data: ThemeData( hintColor: Colors.white, selectedRowColor: Colors.white), child: DropdownButton<String>( value: selectedRegion, hint: Text(hint_label_region, style: white18), isExpanded: true, underline: Container( height: 1.0, decoration: const BoxDecoration( border: Border( bottom: BorderSide( color: Color(0xFFBDBDBD), width: 2))), ), items: <String>[ 'A', 'B', 'C', 'D' ].map<DropdownMenuItem<String>>((String value) { return DropdownMenuItem<String>( value: value, child: new Text( value, style: TextStyle(color: Colors.white), ), ); }).toList(), onChanged: (String newValue) { setState(() { selectedRegion = newValue; }); }, ), ), )