[Flutter]ドロップダウンボタン(dropdown button)の背景色(backgroundcolor)を変える方法

どうも、ちょげ(@chogetarou)です。

ドロップダウンボタンの背景色を変える方法を紹介します。

方法

ドロップダウンボタンの背景色を変えるには、まず「DropDownButton」の代わりに「DropdownButtonFormField」を使います。

次に、「DropdownButtonFormField」の引数「decoration」に「InputDecoration」を指定します。

最後に、指定した「InputDecoration」の引数「filled」に「true」を指定し、引数「fillColor」に背景色を設定します。

DropdownButtonFormFieldは、デコレーションのできる「DropDownButton」のようなものです。

基本的な引数の使い方は変わりません。

DropdownButtonFormField(
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.pink.withAlpha(50),
  ),
  value: _value,
  onChanged: (String? value) {
    setState(() {
      _value = value!;
    });
  },
  items: [
    DropdownMenuItem(
      child: Text('Hello'),
      value: 'Hello',
    ),
    DropdownMenuItem(
      child: Text('Halo'),
      value: 'Halo',
    ),
    DropdownMenuItem(
      child: Text('Hola'),
      value: 'Hola',
    ),
  ],
),