如何更改下拉列表中選定選項的顏色？

Question

下面是下拉列表的代碼，其中所選文本和菜單中的所有文本具有相同的顏色，即黑色。 我想要文本被選中時的白色，同時，像菜單項一樣是黑色的，以便它們在下拉列表的白色背景上可見。

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

有兩種方法可以做到這一點。

如果項目是動態的並且小部件數據是從這個數組列表構建的，那么它就更簡單了。

當小部件使用如下條件構建項目時，這將遍歷列表：

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

其中myItemsArray是您的動態數組；

但是，如果您堅持在小部件內構建列表數據，那么您必須為每個項目復制條件，如下所示：

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

當然，您可以根據需要更改樣式。

Answer 2

您可以包含將在所選項目上使用的style 。

DropdownButtonFormField<String?>(
      style: TextStyle(color: Colors.white), //this one
      decoration: InputDecoration(

此外，要更改列表，請刪除項目上的const並遵循

DropdownMenuItem<String>(
          child: Text(
            'First',
            style: TextStyle(
              color: dropdownValue == 'First'
                  ? Colors.green
                  : Colors.black,
            ),
          ),
          value: 'First'),