Flutter: How to set different colors for DropdownItems and for DropdownButton selected item?

2,586

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,
      )));
Share:
2,586
1encore
Author by

1encore

20 y.o. Full-stack dev

Updated on November 30, 2022

Comments

  • 1encore
    1encore over 1 year

    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;
            });
          },
        ),
      ),
    )