[Flutter]DropdownButtonの背景色(background color)を変える(chgange)には？

[Flutter]DropdownButtonの背景色を変えるには？

Flutter

2022.01.06

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

DropdownButtonの背景色を変える方法を紹介します。

方法
使用例

方法

DropdownButtonの背景色を変えるには、Containerを使います。

まず、DropdownButtonをContainerでラップします。

そして、Containerの引数「color」に背景色を指定します。

Container(
  color: /*背景色*/,
  child: DropdownButton(
    value: _text,
    items: [
      ・・・
    ],
    onChanged: (String? value) {
     ・・・・
    },
  ),
),

Containerを使えば、DropdownButtonの背景色を変えることが出来ます。

DropdownButtonの背景色は、親ウェジェットの色になるようになっています。

なので、Containerでなくても親ウェジェットで色を変えれば、背景色が変わります。

使用例

以下は、使用例です。

Container(
  color: Colors.blue[100],
  child: DropdownButton(
    value: _text,
    items: [
      DropdownMenuItem(
        child: Text('Hello'),
        value: 'Hello',
      ),
      DropdownMenuItem(
        child: Text('Hola'),
        value: 'Hola',
      ),
      DropdownMenuItem(
        child: Text('こんにちは'),
        value: 'こんにちは',
      ),
    ],
    onChanged: (String? value) {
      setState(() {
        _text = value ?? 'Hello';
      });
    },
  ),
),