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

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

您可以包括样式将在所选项目上使用。

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