Flutter: Change background color of DropDownMenuItems pick list

Question

In the following example the DrowdownButton contains a grey background (defined by the container box decoration) with white text. The menu items therefore all have white text by default. However the menu pick list contains a white background, hence the items cannot be read. Is there a way to change the background of the pick list?

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

Solution 1

Hi Please use theme for change the color.

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

Solution 2

Use dropdownColor property.

DropdownButton(
  dropdownColor: Colors.grey
)