[Flutter]AppBarにポップアップメニューを表示するには？

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

AppBarにポップアップメニュー（…）を表示するには、どうしたらいいのでしょうか？

方法

appBar: AppBar(
     title: Text('Sample'), 
     actions: [
          PopupMenuButton<Fruits>(
            onSelected: (Fruits result) {
              setState(() {});
            },
            itemBuilder: (BuildContext context) => <PopupMenuEntry<Fruits>>[
              const PopupMenuItem<Fruits>(
                value: Fruits.Apple,
                child: Text('Apple!'),
              ),
              const PopupMenuItem<Fruits>(
                value: Fruits.Banana,
                child: Text('Banana!'),
              ),
              const PopupMenuItem<Fruits>(
                value: Fruits.Grape,
                child: Text('Grape!'),
              ),
              const PopupMenuItem<Fruits>(
                value: Fruits.Strawberry,
                child: Text('Strawberry!'),
              ),
            ],
          )
        ]),

AppBarにポップメニューを表示するには、まずポップアップメニュー用の値を用意します。

enum Fruits { Apple, Banana, Grape, Strawberry } //例

次に、「actions」に、「PopupMenuButtonウェジェット」を配置します。

 appBar: AppBar(
         actions: [
          PopupMenuButton<Fruits>(
            ・・・
          )
        ]
　　)

これでドットが３つのポップアップメニューのアイコンが表示されるようになります。

ここから引数「itemBuilder」を使ってメニューを作ります。

          PopupMenuButton<Fruits>(
            itemBuilder: (BuildContext context) => <PopupMenuEntry<Fruits>>[
              const PopupMenuItem<Fruits>(
                value: Fruits.Apple,
                child: Text('Apple!'),
              ),
              const PopupMenuItem<Fruits>(
                value: Fruits.Banana,
                child: Text('Banana!'),
              ),
              const PopupMenuItem<Fruits>(
                value: Fruits.Grape,
                child: Text('Grape!'),
              ),
              const PopupMenuItem<Fruits>(
                value: Fruits.Strawberry,
                child: Text('Strawberry!'),
              ),
            ],
          )

メニュー全体は、PopupMenuEntry<値の型>型のリストを返します。

そして、メニュー１つ１つは、「PopupMenuItem<値の型>」で作ります。

これでポップアップメニューが表示できます。

PopupMenuButton class - material library - Dart API

API docs for the PopupMenuButton class from the material library, for the Dart programming language.

api.flutter.dev

全体のコード

class Sample extends StatefulWidget {
  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Sample'), actions: [
          PopupMenuButton<Fruits>(
            itemBuilder: (BuildContext context) => <PopupMenuEntry<Fruits>>[
              const PopupMenuItem<Fruits>(
                value: Fruits.Apple,
                child: Text('Apple!'),
              ),
              const PopupMenuItem<Fruits>(
                value: Fruits.Banana,
                child: Text('Banana!'),
              ),
              const PopupMenuItem<Fruits>(
                value: Fruits.Grape,
                child: Text('Grape!'),
              ),
              const PopupMenuItem<Fruits>(
                value: Fruits.Strawberry,
                child: Text('Strawberry!'),
              ),
            ],
          )
        ]),
        body: Center());
  }
}

enum Fruits { Apple, Banana, Grape, Strawberry }