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

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