4

How can you set the background color of the DropdownButton menu. I can customize the Text() items that appear but they appear within a container which I would like to change the color for.

CopsOnRoad
  • 237,138
  • 77
  • 654
  • 440
AlanKley
  • 4,592
  • 8
  • 40
  • 53

3 Answers3

1

Looks like dropdownColor setting handles this:

DropdownButton<String>(
  dropdownColor: Colors.blue,

 // ...
}

enter image description here

.. found it thanks to options offered by autocomplete

Gene Bo
  • 11,284
  • 8
  • 90
  • 137
  • How use a image instead of just color? – Gilian Aug 29 '21 at 19:47
  • [Google search "flutter dropdownbutton background image"](https://www.google.com/search?rls=en&q=flutter+dropdownbutton+background+image&ie=UTF-8&oe=UTF-8) – Gene Bo Aug 30 '21 at 20:05
  • Obviously I googled before asking, and I didn't find. – Gilian Aug 31 '21 at 02:01
  • It would be obvious if you wrote a new post explaining what you have found so far and what you have tried yourself. Since you asked here in a comment with just a sentence and nothing else to explain & understand **what specifically** you are trying to accomplish, no it was not at all obvious if you searched. I was trying to be polite and not leave your question completely unanswered. MCVE: [Minimal, Complete, and Verifiable Example](http://stackoverflow.com/help/mcve). Best with your iniatitives – Gene Bo Aug 31 '21 at 16:01
0

Something like this will work:

          DropdownMenuItem<int>(
            value: model.id,
            child: SizedBox(
              width: width,
              child: Container(
                color: Colors.green, // 
                child: Text(
                  model.toString(),
                ),
              ),
            ),
          )
        ) 
Harsh Bhikadia
  • 10,095
  • 9
  • 49
  • 70
  • This doesn't appear to have any effect and doesn't provide how to get the value of the SizedBox width. Container wraps tightly around Text and does not color the "parent" of the DropDownMenuItem – AlanKley Apr 13 '19 at 02:58
0
int _value = 0;

Widget _buildDropdown() {
  return DropdownButton(
    value: _value,
    items: [
      DropdownMenuItem(
        value: 0,
        child: Container(
          color: Colors.blue, // you need this
          child: Text("Zero"),
          width: 100,
          alignment: Alignment.center,
        ),
      ),
      DropdownMenuItem(
        value: 1,
        child: Container(
          color: Colors.green, // you need this
          child: Text("One"),
          width: 100,
          alignment: Alignment.center,
        ),
      ),
    ],
    onChanged: (value) => setState(() => _value = value),
  );
}
CopsOnRoad
  • 237,138
  • 77
  • 654
  • 440
  • Thanks @CopsOnRoad. This is what I tried but the Container wraps tightly around it's children so the color does not extend to the edges of the Popup Menu. – AlanKley Apr 13 '19 at 02:51
  • @AlanKley Yes, you are right, there is some padding there and it will be there unless you play with the system files. – CopsOnRoad Apr 13 '19 at 06:14