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;
});
},
),
),
)
Flutter – Change Container Border's Color & Width To change the color and width of Container's border, use its decoration property. Set decoration property with BoxDecoration() object. Set the border property of BoxDecoration() object, with required color and width as per your applications specifications.
HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element. Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS.
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,
)));
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