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

Question

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

我该怎么做才能解决这个问题？有没有一种方法可以使弹出窗口的背景颜色更暗，或者使按钮内的值与项目的颜色不同？

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