Flutter：如何为 DropdownItems 和 DropdownButton 选定项设置不同的 colors？

Question

I have included DropdownButton in my project but I stucked with these problem.

I have tried to use Theme on it but it also changes the both of colors. I can still change the background color of dropdown but I wanted it to be white with black text.

Here you can see the screens , the dropdown is white because text color is also white

AccentColorOverride(
  child: Theme(
    data: ThemeData(
        hintColor: Colors.white,
        selectedRowColor: Colors.white),
    child: DropdownButton<String>(
      value: selectedRegion,
      hint: Text(hint_label_region, style: white18),
      isExpanded: true,
      underline: Container(
        height: 1.0,
        decoration: const BoxDecoration(
            border: Border(
                bottom: BorderSide(
                    color: Color(0xFFBDBDBD),
                    width: 2))),
      ),
      items: <String>[
        'A',
        'B',
        'C',
        'D'
      ].map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: new Text(
            value,
            style: TextStyle(color: Colors.white),
          ),
        );
      }).toList(),
      onChanged: (String newValue) {
        setState(() {
          selectedRegion = newValue;
        });
      },
    ),
  ),
)

Answer 1

If anyone still needs, by Flutter docs you can set a custom selectedItemBuilder, which means you can basically display anything you want respecting the List type. Here's an example:

var listSorted = list.map((dropdownItem) {
    return DropdownMenuItem<dynamic>(
        child: Text("${dropdownItem.label}",
            style: TextStyle(color: Colors.black)),
        value: dropdownItem.value);
    }).toList();
return Container(
      child: DropdownButton(
        isExpanded: true,
        iconEnabledColor: Colors.white,
        underline: Container(
          width: 200,
          height: 1,
          color: Colors.white,
        ),
        value: valueToUpdate,
        items: listSorted,
        onChanged: onChanged,
        selectedItemBuilder: (BuildContext ctxt) {
          return list.map<Widget>((item) {
            return DropdownMenuItem(
                child: Text("${item.label}",
                    style: TextStyle(color: Colors.white)),
                value: item.value);
          }).toList();
        },
        dropdownColor: backgroundColor,
      )));

Answer 2

I think this should work, define a state like '_selectedItemValue', call setState when user taps on an item, and render your DropDownMenuItem based on this state.

    .
    .
    .
    ].map<DropdownMenuItem<String>>((String value) {
            return GestureDetector(
              onTap: () {
                 setState() {
                   _selectedItemValue = value;
                 }
              } ,
              child:DropdownMenuItem<String>(
                value: value,
                child: Container(
                  color: value == _selectedItemValue ? Colors.blue : Colors.white,
                  child: new Text(
                    value,
                    style: TextStyle(color: Colors.white),
                ),),
            ),);
          }).toList(),