How should I customize DropdownButtons and DropdownMenuItems in Flutter?

Question

The default DropdownButton with DropdownMenuItems returns a light-grey dropdown. How should I customize the dropdown (e.g. background color, dropdown width)? I can change the style property in both DropdownButton and DropdownMenuItem, like this:

return new DropdownButton(       value: ...,       items: ...,       onChanged: ...,       style: new TextStyle(         color: Colors.white,       ),     ); 

but this doesn't change the dropdown's background color.

Should I copy DropdownMenu and extend it? Does Flutter plan to add customization for this widget in the near future?

Answer 1

You can accomplish this by wrapping the DropdownButton in a Theme widget and overriding the canvasColor.

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> {   int _value = 42;    @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('Foo'),                 value: 0,               ),               new DropdownMenuItem(                 child: new Text('Bar'),                 value: 42,               ),             ],             onChanged: (int value) {               setState(() {                 _value = value;               });             },           ),         ),       ),     );   } }