Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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;
        });
      },
    ),
  ),
)
like image 892
1encore Avatar asked Oct 30 '19 10:10

1encore


People also ask

How do you change the container color on a click in flutter?

Flutter – Change Container Border's Color & Width To change the color and width of Container's border, use its decoration property. Set decoration property with BoxDecoration() object. Set the border property of BoxDecoration() object, with required color and width as per your applications specifications.

How do you style a drop down button?

HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element. Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS.


1 Answers

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,
      )));
like image 138
Leo S. Avatar answered Nov 25 '22 15:11

Leo S.