Flutter：更改 DropDownMenuItems 选择列表的背景颜色

Question

在下面的示例中，DrowdownButton 包含带有白色文本的灰色背景（由容器框装饰定义）。因此，默认情况下，菜单项都具有白色文本。但是，菜单选择列表包含白色背景，因此无法读取项目。有没有办法改变选择列表的背景？

[] 1[]2

@override
  Widget build(BuildContext context) {
    String dropdownValue = 'One';
    return Scaffold(
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(AppStyles.borderRadius),
            color: Colors.grey,
          ),
          padding: EdgeInsets.fromLTRB(8.0,0,8.0,0),
          child: DropdownButton<String>(
            value: dropdownValue,
            icon: Icon(Icons.arrow_downward, color: Colors.white),
            iconSize: 24,
            elevation: 16,
            style: TextStyle(
                color: Colors.white
            ),
            underline: Container(
              height: 0,
              color: Colors.deepPurpleAccent,
            ),
            onChanged: (String newValue) {
              setState(() {
                dropdownValue = newValue;
              });
            },
            items: <String>['One', 'Two', 'Three', 'Four']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            })
                .toList(),
          ),
        ),
      ),
    );
  }

Answer 1

您好请使用主题更改颜色。

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  State createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Theme(
          data: Theme.of(context).copyWith(
            canvasColor: Colors.blue.shade200,
          ),
          child: new DropdownButton(
            value: _value,
            items: <DropdownMenuItem<int>>[
              new DropdownMenuItem(
                child: new Text('Hi'),
                value: 0,
              ),
              new DropdownMenuItem(
                child: new Text('Hello'),
                value: 1,
              ),
            ],
            onChanged: (int value) {
              setState(() {
                _value = value;
              });
            },
          ),
        ),
      ),
    );
  }
}

Answer 2

使用dropdownColor属性.

DropdownButton(
  dropdownColor: Colors.grey
)

Flutter：更改 DropDownMenuItems 选择列表的背景颜色

Flutter: Change background color of DropDownMenuItems pick list

background

colors

drop-down-menu

flutter

dropdownbutton