Flutter DropdownButton 颜色与父 Widgets 相同答案

【问题标题】：Flutter DropdownButton same color as parent WidgetsFlutter DropdownButton 颜色与父 Widgets 相同
【发布时间】：2018-09-30 14:37:51
【问题描述】：

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

我已经加载了按钮，并且可以在弹出正确的菜单时单击它。问题是屏幕上按钮的外观。与父Widget同色，完全不显示选中项的文字。

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

这是截图：

这是构建此视图的代码：

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

        ],
      )

    ],
  ),

);
}

【问题讨论】：

您是否将主题中的多个值设置为相同的颜色？
不，我的主题非常简单：我只是设置了亮度、原色和强调色。

标签： drop-down-menu colors flutter

【解决方案1】：

您是否尝试过将 Dropdown 包装在一个白色的容器中，然后只需确保 DropdownButton 样式属性上的子项具有黑色的 TextStyle。

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 来确保下拉菜单填充容器的宽度。

您还可以将容器包裹在主题周围，以在活动和显示菜单项时更改实际下拉菜单的背景。

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

【讨论】：

@EdwinLiu OP 希望它是白色背景。不过，使用上述方法，您可以完全自定义下拉菜单的主题，但不会影响应用的主题。
谢谢@AlanNegrete！包装主题是一个很好的解决方案。现在我可以睡个好觉了，今晚！

【解决方案2】：

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

  ))

【讨论】：

我用过这个。谢谢！

【解决方案3】：

使用提示而不是值

例子

提示：dropdownValue == null ？ Text("选择一个", style: TextStyle(color: Colors.red)): Text(dropdownValue, style: TextStyle(color: Colors.green)),

dropdownValue 是我选择的值

【讨论】：

【解决方案4】：

您可以使用以下代码将自定义颜色赋予 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,
    ),

【讨论】：

【解决方案5】：

你可以这样做

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

【讨论】：

【解决方案6】：

试试这个，并用主题颜色替换容器的颜色：

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

【讨论】：