[Flutter]DropdownButton(ドロップダウンボタン)のメニュー(menu)に区切り線(divider)を表示するには？

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

DropdownButtonのメニューに区切り線を表示する方法を紹介します。

方法
使用例

方法

DropdownButtonのメニューに区切り線を表示するには、ColumnとDividerを使います。

まず、DropdownMenuItemの引数「child」にClumnを指定します。

そして、Columnの引数「children」のリストにTextとDividerを指定します。

DropdownButton(
  value: _text,
  items: [
    DropdownMenuItem(
      child: Column(
        children: [
          Text('テキスト'),
          Divider(),
        ],
      ),
      value: '値',
    ),
    ・・・・
  ],
  onChanged: (String? value) {
   ・・・
  },
),

ColumnとDividerを使えば、DropdownButtonのメニューに区切り線を表示することが出来ます。

他の方法としては、Containerを使う方法があります。

具体的には、TextをContainerでラップし、Containerの下に枠線をつけます。

使用例

以下は、使用例です。

DropdownButton(
  value: _text,
  selectedItemBuilder: (context) => [
    Container(
      width: 100,
      child: Text('Hello'),
    ),
    Container(
      width: 100,
      child: Text('Hola'),
    ),
    Container(
      width: 100,
      child: Text('こんにちは'),
    ),
  ],
  items: [
    DropdownMenuItem(
      child: Column(
        children: [
          Text('Hello'),
          Divider(
            color: Colors.grey,
            thickness: 1.0,
          ),
        ],
      ),
      value: 'Hello',
    ),
    DropdownMenuItem(
      child: Column(
        children: [
          Text('Hola'),
          Divider(
            color: Colors.grey,
            thickness: 1.0,
          ),
        ],
      ),
      value: 'Hola',
    ),
    DropdownMenuItem(
      child: Column(
        children: [
          Text('こんにちは'),
          Divider(
            color: Colors.grey,
            thickness: 1.0,
          ),
        ],
      ),
      value: 'こんにちは',
    ),
  ],
  onChanged: (String? value) {
    setState(() {
      _text = value ?? 'Hello';
    });
  },
  isDense: true,
),