FlutterでPopupMenuを表示する

Flutterで以下のようなPopupMenuを表示する方法を記す。

↓タップ

"Signed in as John Smith"の部分はただのラベル。選択不可。
"Sign out"の部分は、選択可。

実現のポイント

• Menu全体には、PoupMenuButtonを使う
• Menuの各項目にはPopupMenuItem、罫線にはPopupMenuDividerを使う
• PoupMenuItemにenabled=falseを指定すると、選択不可項目を作れる
  • ただし、子Textがグレーアウトされるので、TextStyle#colorを指定する必要がある

コードサンプル

PopupMenuButton<MenuCommand>(
    onSelected: (MenuCommand value) {},
    // ボタンの見た目を指定。省略すると"..."になる。
    child: CircleAvatar(
        child: Icon(Icons.person),
    ),
    itemBuilder: (BuildContext context) => <PopupMenuEntry<MenuCommand>>[
      PopupMenuItem(
        enabled: false,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Signed in as',
              style: TextStyle(
                color: Colors.black87,
              ),
            ),
            Text(
              'John Smith',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.black87,
              ),
            ),
          ],
        ),
      ),
      const PopupMenuDivider(),
      const PopupMenuItem(
        value: MenuCommand.signOut,
        child: Text('Sign out'),
      ),
    ],
  ),

MenuCommandは自分で定義したenumで、Menuの項目選択時のvalueの型に対応している。
サンプルコードでは定義を省略している。

最初に示した図のようにタイトルバーにボタンを置くなら、AppBar#actionsにPopupMenuButtonを於けばOK。