Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter DropdownButton same color as parent Widgets

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

        ],
      )

    ],
  ),

);
}
like image 524
jared-nelsen Avatar asked Apr 20 '18 00:04

jared-nelsen


1 Answers

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,
  ),
like image 131
Alan Negrete Avatar answered Sep 29 '22 18:09

Alan Negrete