Flutter DropdownButton与父部件相同的颜色

13

我一直在开发一个玩具提醒应用程序,希望为用户实现一个下拉菜单以选择给定的时间间隔。

我已经加载了按钮,并且可以正确点击它以弹出正确的菜单。问题在于按钮在屏幕上的外观。它与父小部件的颜色相同,并且根本不显示所选项目的文本。

如何使下拉按钮具有白色背景和黑色文本?

这里是屏幕截图:

Dropdown button color issue

以下是构建此视图的代码:

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

        ],
      )

    ],
  ),

);
}

你在主题中将多个值设置为相同的颜色了吗? - Jonah Williams
不,我的主题非常简单:我只设置了亮度、主色和强调色。 - jared-nelsen
6个回答

24

你尝试过将下拉菜单包裹在白色的容器中,然后只需确保DropdownButton样式属性的子元素具有黑色文本样式即可。

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

注意:我使用ButtonTheme来确保下拉菜单填充容器的宽度。

您还可以将容器包装在一个Theme中,以更改实际下拉菜单在激活并显示菜单项时的背景。

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

@EdwinLiu OP希望它是白色背景。但是,通过上述方法,您可以完全自定义下拉菜单的主题,而不影响应用程序的主题。 - Alan Negrete
谢谢@AlanNegrete!主题包装是一个很好的解决方案。现在我今晚可以安心睡觉了! - Margriet

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
我使用了这个。谢谢! - dazza5000

5

使用提示代替值

示例

提示:dropdownValue == null ? Text("请选择", style: TextStyle(color: Colors.red)): Text(dropdownValue, style: TextStyle(color: Colors.green)),

dropdownValue 是我选择的值


2
你可以通过以下方式实现:

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

2
您可以使用以下代码为DropDownButton提示信息设置自定义颜色。
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,
    ),

1

尝试这样做,将容器的颜色替换为主题颜色:

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接