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?

[ DropDownButton ] 1[ When clicked ]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(),
          ),
        ),
      ),
    );
  }

score 17 · Accepted Answer · answered Nov 20 '19 at 08:34

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

Thanks, so simply a matter of wrapping the container in a _Theme_ with `data: Theme.of(context).copyWith(canvasColor: Colors.grey,),` in this case. — plam, Nov 20 '19 at 10:14
Please read [answer] and [edit] your answer to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post. — Adriaan, Oct 28 '22 at 05:26

score 14 · Answer 2 · answered Jan 05 '21 at 14:13

14

Use dropdownColor property.

DropdownButton(
  dropdownColor: Colors.grey
)

answered Jan 05 '21 at 14:13

BambinoUA

6,126
5
35
51

Best answer -- docs say `If it is not provided, the theme's [ThemeData.canvasColor] will be used instead.` – Luke Hutchison Jul 01 '23 at 06:33
I don't see a similar setting for foreground color in the dropdown -- it seems to be constrained to the same color as the text in the button. – Luke Hutchison Jul 01 '23 at 06:33

Flutter: Change background color of DropDownMenuItems pick list

2 Answers2