Как мне настроить DropdownButtons и DropdownMenuItems во Flutter?

Как сказал Коллин, ваш DropdownMenuItem будет следить за вашим классом ThemeData. Не только его backgroundColor будет соответствовать canvasColor в вашем ThemeData классе, но также он будет следовать тому же TextStyle.

Итак, для быстрого примера:

new ThemeData(
        fontFamily: "Encode Sans", //my custom font
        canvasColor: _turquoise, //my custom color
//other theme data)

Кроме того, если вы хотите управлять width меню, вы можете скормить его свойству child новый Container и добавить желаемый width, проверить следующий GIF, я начал с width: 100.0, затем перезагрузил его после изменения на 200.0, обратите внимание, как width был изменен, просто убедитесь, что вы используете подходящую ширину, чтобы у вас не возникло проблем с переполнением позже, когда вы будете использовать меню в более сложном макете.

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title:new Text ("Test"),
      ),
      body: new Center(
        child: new DropdownButton(items: new List.generate(20, (int index){
          return new DropdownMenuItem(child: new Container(
            child: new Text ("Item#$index"),
            width: 200.0, //200.0 to 100.0
          ));
        })
            , onChanged: null)
      ),
    );
  }
}

Этого можно добиться, заключив DropdownButton в _ 2_ и переопределение виджета _ 3_.

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

Мне удалось изменить фон для раскрывающегося списка, заключив его в Container с набором свойств color.

До:

После:

Вот код:

Container(
  padding:
      EdgeInsets.symmetric(horizontal: 10, vertical: 5),
  decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(10)),

  // dropdown below..
  child: DropdownButton<String>(
      value: dropdownValue,
      icon: Icon(Icons.arrow_drop_down),
      iconSize: 42,
      underline: SizedBox(),
      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()),
)

Если вы хотите, чтобы DropdownButton заполнял пространство, в котором он находится, используйте свойство isExpanded и установите для него значение true.

DropdownButton<String>(
   isExpanded: true,
)

В последней версии Flutter можно сделать что-то очень простое.

Класс DropdownButton имеет встроенную переменную dropdownColor, которой можно напрямую присвоить любой цвет, без изменения каких-либо ThemeData. Также автоматически меняет цвет элементов раскрывающегося меню.

Используйте это для цвета

 DropdownButtonFormField(
              items: null,
              onChanged: null,
              dropdownColor: Colors.red,
            ),

Вы можете обернуть его таким контейнером:

Container(
  margin: const EdgeInsets.all(15.0),
  padding: const EdgeInsets.only(left: 10.0, right: 10.0),
  decoration: BoxDecoration(
      color: Colors.white,
      border: Border.all(color: Colors.white)
  ),
  child: DropdownButton(
    dropdownColor: Colors.white,
    style: TextStyle(
      color: Colors.black,
      backgroundColor: Colors.white,
    ),
    value: 'ar',
    items: [
      DropdownMenuItem(child: Text('English'), value: 'en'),
      DropdownMenuItem(child: Text('العربية'), value: 'ar'),
    ],
  ),
)

Выход:

Как мне настроить DropdownButtons и DropdownMenuItems во Flutter?

Container(
   child: DropdownButtonHideUnderline(
      child: DropdownButton(
         value: _value,
         icon: Icon(Icons.arrow_drop_down,color: Colors.white,),
         dropdownColor: Colors.redAccent,
         iconSize: 22,
         items: [
            DropdownMenuItem(
               child: Text(
                  Employees by Gender",
                  style: GoogleFonts.dosis(
                     fontSize: 10,
                     color: Colors.black54
                  ),
               ),
               value: 1,
            ),
            DropdownMenuItem(
               child: Text(
                  Employees by Attendance",
                  style: GoogleFonts.dosis(
                     fontSize: 10,
                     color: Colors.black54
                  ),
               ),
               value: 2,
            ),  
         ],
         onChanged: (value) {
            setState(() {
               _value = value;
            });
         })),
)