如何更改下拉列表中选定选项的颜色？

Question

Below is the code for a dropdown list where the selected text and all the texts in the menu are of the same color, ie, 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;
                          }),

Answer 1

There are two approaches for doing this.

If the items are dynamic and the widget data is built from this array list, then it's simpler.

This will iterate over the list when the widget builds the item with a condition like the following:

 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 wish.

Answer 2

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'),