Below is the code for a dropdown list where the selected text and all the texts in the menu are of the same color, i.e., black. I want a white color for the text when it is selected and, simultaneously, like the menu items to be black so that they are visible over the white background of the dropdown list.
child: DropdownButtonFormField(
style: TextStyle(color: Colors.black),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.cyan, width: 1.0),
borderRadius: BorderRadius.circular(10),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.white, width: 1.0),
borderRadius: BorderRadius.circular(10),
),
hintText: 'Year of Education',
hintStyle: TextStyle(
color: Color.fromARGB(255, 245, 244, 255),
fontStyle: FontStyle.italic,
fontSize: 10,
),
),
value: dropdownValue,
items: const [
DropdownMenuItem<String>(
child: Text('-choose-'), value: ''),
DropdownMenuItem<String>(
child: Text('First'), value: 'First'),
DropdownMenuItem<String>(
child: Text('Second'), value: 'Second'),
DropdownMenuItem<String>(
child: Text('Third'), value: 'Third'),
DropdownMenuItem<String>(
child: Text('Fourth'), value: 'Fourth'),
DropdownMenuItem<String>(
child: Text('Fifth'), value: 'Fifth'),
],
onChanged: (String? value) {
setState(() {
dropdownValue = value!;
TextStyle(color: Colors.white);
});
},
validator: (value) {
if (dropdownValue == '')
return 'You must select a value.';
return null;
}),
CodePudding user response：
You can include style that will be used on the selected item.
DropdownButtonFormField<String?>(
style: TextStyle(color: Colors.white), //this one
decoration: InputDecoration(
Also, to change on list, remove const on items and follow
DropdownMenuItem<String>(
child: Text(
'First',
style: TextStyle(
color: dropdownValue == 'First'
? Colors.green
: Colors.black,
),
),
value: 'First'),
CodePudding user response：
There are two approaches to doing this.
If the items are dynamic and the widget data is build from this array list, then it's simpler.
This will iterate the list when the widget builds the item with a condision like this:
items: myItemsArray.map(
(curItem) {
if (curItem == dropdownValue) {
return DropdownMenuItem(
value: curItem,
child: Text(curItem.value.toString(),
style: TextStyle(color: Colors.red)),
);
} else {
return DropdownMenuItem(
value: curItem,
child: Text(curItem.value.toString(),
style:
TextStyle(color: Color.fromARGB(255, 0, 0, 0))),
);
}
},
).toList(),
Where myItemsArray is your dynamic array;
But, if you insist on building the list data inside the widget, then you must duplicate the condition for each item as follows:
items: [
DropdownMenuItem<String>(child: Text('-choose-'), value: ''),
DropdownMenuItem<String>(
child: Text(
'First',
style: dropdownValue == 'First'
? TextStyle(color: Colors.red,)
: TextStyle(color: Color.fromARGB(255, 0, 0, 0)),
),
value: 'First'),
DropdownMenuItem<String>(
child: Text(
'Second',
style: dropdownValue == 'Second'
? TextStyle(
color: Colors.red,)
: TextStyle(color: Color.fromARGB(255, 0, 0, 0)),
),
value: 'Second'),
DropdownMenuItem<String>(
child: Text(
'Third',
style: dropdownValue == 'Third'
? TextStyle(color: Colors.red,)
: TextStyle(color: Color.fromARGB(255, 0, 0, 0)),
),
value: 'Third'),
DropdownMenuItem<String>(
child: Text(
'Fourth',
style: dropdownValue == 'Fourth'
? TextStyle(color: Colors.red,)
: TextStyle(color: Color.fromARGB(255, 0, 0, 0)),
),
value: 'Fourth'),
DropdownMenuItem<String>(
child: Text(
'Fifth',
style: dropdownValue == 'Fifth'
? TextStyle(color: Colors.red,)
: TextStyle(color: Color.fromARGB(255, 0, 0, 0)),
),
value: 'Fifth'),
]
Of course you can change the style however you want.