13

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:

Dropdown button color issue

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
              )
          )

        ],
      )

    ],
  ),

);
}
2
  • Did you set multiple values in your theme to the same Color? Apr 20, 2018 at 1:18
  • No, my theme is very simplistic: I just set a brightness, a primary color, and an accent color. Apr 20, 2018 at 1:26

6 Answers 6

24

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,
  ),
2
  • @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. Aug 6, 2019 at 18:01
  • Thanks @AlanNegrete! Wrapping in a theme is a great solution. Now I can sleep well, tonight!
    – Margriet
    Oct 2, 2019 at 18:45
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;
      });
    },

  ))
1
  • 1
    I used this one. Thank you!
    – dazza5000
    Jul 25, 2019 at 0:14
4

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

2

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,
    ),
2

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(),
                              ),
                            ),
                          )
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.