Flutter DropdownButton same color as parent Widgets

Question

I've been working on a toy reminders app and wish to implement a dropdown menu for the user to select a given time interval.

I have the button loaded and can click on it with the correct menu popping up. The problem is the appearance of the button on the screen. It is the same color as the parent Widget and does not display the text of selected item at all.

How can I get the dropdown button to have a white background and black text?

Here is a screenshot:

And here is the code that builds this view:

@override
Widget build(BuildContext context) {

return new Container(

  child: new Row(

    children: <Widget>[
      new Expanded(

        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[

            _buildInformationRow(),
            _buildReminderRow(),

          ],
        )

      )
    ],

  )

  );
 }

Widget _buildInformationRow() {

return new Container(
  padding: const EdgeInsets.all(10.0),
  child: new Row(

    children: <Widget>[

      new Column(
        children: <Widget>[

          new Container(
            padding: const EdgeInsets.all(10.0),
            child: new Text(
              "This app can remind you to do stuff\non a regular basis",
                style: new TextStyle(
                  color: Colors.white,
                  fontSize: 18.0,
                )
            ),

          )

        ],
      )

    ],

  ),

);
}

Widget _buildReminderRow() {

return new Container(

  child: new Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[

      new Column(
        children: <Widget>[

          new Container(

            child: new Text(
                "Remind me",
                style: new TextStyle(
                  color: Colors.white,
                  fontSize: 18.0,
                )
            ),

          )

        ],
      ),

      new Column(
        children: <Widget>[

          new Container(

              child: new DropdownButton<String>(
                  style: new TextStyle(
                    color: Colors.black,
                    fontSize: 18.0,
                  ),
                  items: <String>["Never", "Daily", "Hourly", "Every 30 Minutes"].map((String value) {
                    return new DropdownMenuItem <String>(
                        value: value,
                        child: new Text(value)
                    );
                  }).toList(),
                  onChanged: null
              )
          )

        ],
      )

    ],
  ),

);
}

Did you set multiple values in your theme to the same Color? — Jonah Williams
– Jonah Williams, Commented Apr 20, 2018 at 1:18
No, my theme is very simplistic: I just set a brightness, a primary color, and an accent color. — jared-nelsen
– jared-nelsen, Commented Apr 20, 2018 at 1:26

Alan Negrete · Accepted Answer · 2018-05-21 04:37:15Z

25

Have you tried wrapping your Dropdown in a Container with a white color, then just ensure the child on the DropdownButton style attribute has a TextStyle with black color.

new Container(
    color: Colors.white,
    child: DropdownButtonHideUnderline(
        child: ButtonTheme(
          alignedDropdown: true,
          child: DropdownButton<T>(
            items: dropdownItems,
            onChanged: this.onChanged,
            value: this.preSelected,
            style: new TextStyle(
              color: Colors.black,
            ),
          ),
        )
    ),
  ),

Note: I use the ButtonTheme to ensure the dropdown fills the width of the Container.

And you can also wrap the container around a Theme to change the background of the actual dropdown when active and displaying the menu items.

new Theme(
    data: Theme.of(context).copyWith(
      canvasColor: Theme.of(context).primaryColor
    ),
    child: // Your Dropdown Code Here,
  ),

edited May 21, 2018 at 4:37

answered May 21, 2018 at 4:28

Alan Negrete

4204 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alan Negrete Over a year ago

@EdwinLiu The OP wanted it to be a white background. With this method above though, you can customize the Theme of the Dropdown entirely though without affecting your app's theme.

Margriet Over a year ago

Thanks @AlanNegrete! Wrapping in a theme is a great solution. Now I can sleep well, tonight!

adiga · Accepted Answer · 2019-06-18 13:11:55Z

6

Theme(
  data: new ThemeData(
    canvasColor: Colors.red,
      primaryColor: Colors.black,
      accentColor: Colors.black,
      hintColor: Colors.black),
  child: DropdownButton(
    iconEnabledColor: Colors.white,
    style: TextStyle(color: _selectedColor,fontSize: 16),
    underline: Text(''),
    value: selectedCurrency,
    isExpanded: true,
    iconSize: 40,
    items: currencies.entries
        .map<DropdownMenuItem<String>>(
            (MapEntry<String, String> e) =>
                DropdownMenuItem<String>(
                  value: e.key,
                  child: Text(e.value),
                ))
        .toList(),
    onChanged: (String newKey) {
      setState(() {
        _selectedColor = Colors.white;
        selectedCurrency = newKey;
      });
    },

  ))

edited Jun 18, 2019 at 13:11

adiga

35.4k9 gold badges65 silver badges88 bronze badges

answered Jun 18, 2019 at 13:04

Raman

1691 gold badge3 silver badges6 bronze badges

Comments

Michel Tonon · Accepted Answer · 2020-01-24 13:06:46Z

5

Use hint instead of value

Example

hint: dropdownValue == null ? Text("Select one", style: TextStyle(color: Colors.red)): Text(dropdownValue, style: TextStyle(color: Colors.green)),

dropdownValue is the value that I selected

answered Jan 24, 2020 at 13:06

Michel Tonon

1512 silver badges3 bronze badges

Comments

Ayan Bhattacharjee · Accepted Answer · 2020-07-16 03:59:23Z

You can use the following code to give your customized color to DropDownButton hint

DropdownButton<String>(
      isExpanded: true,
      hint: Text('Your hint',style: TextStyle(color: Color(0xFFF5F5F5)),),
      icon: Icon(Icons.arrow_downward),
      iconSize: 20,
      elevation: 12,
      style: TextStyle(color: Colors.lightBlue),
      underline: Container(
        height: 0,
      ),

      items: _currencies
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(
            value,
            style: TextStyle(fontSize: 14.0, color: Color(0xFFF5F5F5)),
          ),
        );
      }).toList(),
      onChanged: (String valueSelected) {
        onDropDownItemChanged(valueSelected);
      },
      value: dropdownValue,
      //00000value: dropdownValue,
    ),

Mohi Dev · Accepted Answer · 2020-10-15 10:19:41Z

You can do it by

DropdownButtonHideUnderline(
                            child: Theme(
                              data: ThemeData(
                                primaryColor: Colors.white,
                              ),
                              child: DropdownButton<String>(
                                isExpanded: true,
                                value: _selectedMetalColor,
                                onChanged: (String newValue) {
                                  setState(() {
                                    _selectedMetalColor = newValue;
                                    //dropdownValue = newValue;
                                  });
                                },
                                // hint: Text(
                                //   teethMetalColors[0],
                                //   style: TextStyle(
                                //     color: Colors.white,
                                //   ),
                                // ),
                                icon: Container(
                                  margin: EdgeInsets.only(right: 12.0),
                                  child: Icon(
                                    // Add this
                                    Icons.keyboard_arrow_down, // Add this
                                    color: Colors.white, // Add this
                                    size: 35.0,
                                  ),
                                ),
                                style: TextStyle(
                                    color: Colors.black, fontSize: 16.0),
                                selectedItemBuilder:
                                    (BuildContext context) {
                                  return teethMetalColors
                                      .map((String value) {
                                    return Padding(
                                      padding: const EdgeInsets.only(
                                          top: 12.0, left: 16.0),
                                      child: Text(
                                        _selectedMetalColor,
                                        style:
                                            TextStyle(color: Colors.white),
                                      ),
                                    );
                                  }).toList();
                                },
                                items: teethMetalColors
                                    .map<DropdownMenuItem<String>>(
                                        (String value) {
                                  return DropdownMenuItem<String>(
                                    value: value,
                                    child: Padding(
                                      padding: const EdgeInsets.all(8.0),
                                      child: Text(
                                        value,
                                        style:
                                            TextStyle(color: Colors.black),
                                      ),
                                    ),
                                  );
                                }).toList(),
                              ),
                            ),
                          )

Jerry · Accepted Answer · 2021-05-04 15:56:01Z

try this, and replace the Container's color in the theme color:

 Container(
        padding: const EdgeInsets.only(left: 0.0, right: 10.0),
        decoration: BoxDecoration(
          color: Colors.cyanAccent,
        ),
        child: DropdownButtonHideUnderline(
          child: new DropdownButton<String>(
                  style: new TextStyle(
                    color: Colors.black,
                    fontSize: 18.0,
                  ),
                  items: <String>["Never", "Daily", "Hourly", "Every 30 Minutes"].map((String value) {
                    return new DropdownMenuItem <String>(
                        value: value,
                        child: new Text(value)
                    );
                  }).toList(),
                  onChanged: null
              ),
),
)

Collectives™ on Stack Overflow

Flutter DropdownButton same color as parent Widgets

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related