无法弄清楚如何正确设置 DropdownButton 的样式

Posted 2023-02-23

【中文标题】无法弄清楚如何正确设置 DropdownButton 的样式

【英文标题】：Can't figure out how to properly style DropdownButton

【发布时间】：2020-06-21 18:28:31

【问题描述】：

我是 Flutter 的新手，我正在为一个大学项目构建一个应用程序，但我遇到了这个小部件的问题。

DropdownButton input value in white color

DropdownButton input value in black color

这是我的 DropdownButton 代码，它显示为白色的提示，但是当我选择一个项目时，按钮中的值显示为黑色。如果我将 DropdownButton 颜色更改为白色，那么当弹出窗口出现时，背景颜色为白色，字体颜色也为白色。这样我就看不到这些项目，因为它们与背景颜色相同。

class DropdownWidget extends StatelessWidget 
  final IconData icon;
  final IconData arrowIcon;
  final String hint;
  final List items;
  final Stream stream;
  final Function onChanged;

  DropdownWidget(this.icon, this.arrowIcon, this.hint, this.items, this.stream, this.onChanged);

  @override
  Widget build(BuildContext context) 
    return StreamBuilder(
      stream: stream,
      builder: (context, snapshot) 
        print("Snapshot data -> $snapshot.data");
        return InputDecorator(
          child: DropdownButton(
            icon: Icon( arrowIcon, color: Colors.white,),
            hint: Text( hint, style: TextStyle(color: Colors.white),),
            items: items.map((value) 
              print("Valor do item $value");
              return DropdownMenuItem(
                value: value,
                child: Text(value.runtimeType == int ? value.toString() : value, style: TextStyle(color: Colors.black),),
              );
            ).toList(),
            onChanged: onChanged,
            value: snapshot.data,
            isExpanded: true,
            style: TextStyle(
//              color: Colors.black,
              color: Theme.of(context).textSelectionColor,
              fontSize: 18.0,
            ),
            underline: Container(),
            isDense: true,
          ),
          decoration: InputDecoration(
            icon: icon == null ? null : Icon(icon, color: Colors.white,),
            hintText: hint,
            hintStyle: TextStyle(color: Colors.white),
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Theme.of(context).primaryColor)
            ),
            contentPadding: EdgeInsets.only(
              left: 5,
              right: 0,
              bottom: 24,
              top: 30
            ),
            errorText: snapshot.hasError ? snapshot.error : null,
          ),
        );
      
    );
  

我能做些什么来解决这个问题？有没有办法使弹出窗口的背景颜色更深，或者只是按钮内的值与项目颜色不同？

【参考方案1】：

您必须将 DropDownButton 包装在主题中。示例代码：

Theme(
    data: ThemeData(canvasColor: Colors.black), //this is where the magic happens
    child: DropdownButton<String>(
      value: dropDownValue,
      onChanged: (String newValue) 
        setState(() 
          dropDownValue = newValue;
        );
      ,

【讨论】：

如果这解决了您的问题，请将其标记为可能对同样问题有疑问的其他人的答案！