[Flutter]DropdownButton(ドロップダウンボタン)のアイテム(item)の位置(position)を変える(change)には？

[Flutter]DropdownButtonのアイテムの位置を変えるには？

Flutter

2022.01.07

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

DropdownButtonのアイテムの位置を変える方法を紹介します。

方法
使用例

方法

DropdownButtonのアイテムの位置を変えるには、Containerを使います。

まず、DropdownMenuItemの引数「child」をContainerでラップします。

そして、Containerの引数「alignment」にアイテムの位置を指定します。

DropdownButton(
  value: _text,
  items: [
    DropdownMenuItem(
      child: Container(
        alignment: /*Alignmentクラスで位置を指定*/,
        child: Widget(),
      ),
      value: '値',
    ),
    ・・・・
  ],
  onChanged: (String? value) {
    ・・・
  },
),

Containerを使えば、DropdownButtonのアイテムの位置を変えることが出来ます。

DropdwonButtonのアイテムの位置が変わらない場合は、Containerの引数「width」に横幅を指定します。

DropdownMenuItem(
  child: Container(
    width: /*横幅*/,
    alignment: /*位置*/,
    child: Widget(),
  ),
  value: '値',
),

使用例

以下は、使用例です。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _text = 'Hello';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DropdownButton(
          value: _text,
          items: [
            DropdownMenuItem(
              child: Container(
                width: 100,
                alignment: Alignment.center,//中央
                child: Text('Hello'),
              ),
              value: 'Hello',
            ),
            DropdownMenuItem(
              child: Container(
                width: 100,
                alignment: Alignment.centerLeft,//左
                child: Text('Hola'),
              ),
              value: 'Hola',
            ),
            DropdownMenuItem(
              child: Container(
                width: 100,
                alignment: Alignment.centerRight,//右
                child: Text('こんにちは'),
              ),
              value: 'こんにちは',
            ),
          ],
          onChanged: (String? value) {
            setState(() {
              _text = value ?? 'Hello';
            });
          },
        ),
      ),
    );
  }
}