[Flutter]AppBarにドロップダウンメニューを表示するには？

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

AppBarにドロップダウンメニューを表示する方法を紹介します。

方法

  String _value = "Hello";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: DropdownButton(
                value: _value,
                onChanged: (String? value) {
                  setState(() => _value = value ?? 'Hello');
                },
                items: <DropdownMenuItem<String>>[
              DropdownMenuItem(
                child: Text('Hello'),
                value: 'Hello',
              ),
              DropdownMenuItem(
                child: Text('Hola!'),
                value: 'Hola!',
              ),
              DropdownMenuItem(
                child: Text('こんにちは'),
                value: 'こんにちは',
              ),
            ])),
        body: Center(
          child: Text(_value),
        ));
  }

AppBarにドロップダウンメニューを表示するには、DropDownButtonを使います。

AppBar(
    title: DropDownButton()
)

DropdownButtonの引数「items」で、メニューを作ります。

         title: DropdownButton(
            items: <DropdownMenuItem<String>>[
              DropdownMenuItem(
                child: Text('Hello'),
                value: 'Hello',
              ),
              DropdownMenuItem(
                child: Text('Hola!'),
                value: 'Hola!',
              ),
              DropdownMenuItem(
                child: Text('こんにちは'),
                value: 'こんにちは',
              ),
            ])

メニューには、DropdownMenuItemウェジェットを使います。

そして、引数「value」で使用する値の設定、引数「onChanged」で値を変更した際の処理を決めます。

  String _value = "Hello";
        　・・・
        appBar: AppBar(
            title: DropdownButton(
                value: _value, //変更する値
                onChanged: (String? value) {
                  setState(() => _value = value ?? 'Hello'); //変更した際の処理
                },
         ・・・

これでドロップダウンメニューを表示することが出来ます。