Flutter-MenuAnchor

ちょっと前までならFlutterでポップアップメニューと言えばPopupMenuButtonだったが、現在ではMenuAnchorもしくはMenuBarが推奨されている。

PopupMenuButton class - material library - Dart API

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

PopupMenuButtonのAPI中にも「Updating to MenuAnchor」とそれらしきことが書かれているし。

基本的な使い方については、API説明書に書かれているので、そこに書かれていないことと、2025/01/4現在不具合的なことについて記述する。

配置可能なウィジェット

MenuAnchorで配置可能なウィジェットはList<Widget>とList<PopupMenuEntry>だったPopupMenuButtonとは異なり、一応幅広いウィジェットが設定可能になっている。

しかしPopupMenuEntryには派生として用途別にPopupMenuItem PopupMenuDivider CheckedPopupMenuItemと3つのウィジェットが用意されていたが、MenuAnchorには専用としてはMenuItemButtonとSubMenuButtonしかなく、区切り線やチェックボックス(セレクター)はどうやればいいのかという問題が出てくる。

区切り線とチェックボックス

設定可能なのがList<Widget>になるので、区切り線やチェックボックスは、そのウィジェットをそのまま配置すれば問題ない。

区切り線はDividerウィジェットをMenuItemButtonの間に挟むという方法。

上記のような区切り線が表示される。

チェックボックスはちょっと面倒。

MenuItemButton(
  onPressed: () {
    setState(() {
      _toggle = !_toggle;
    });
  },
  leadingIcon: Icon(_toggle ? Icons.check : null),
  child: const Text('Check Box1'),
),

上記のような実装になる。
つまり、チェックのON/OFFに関してはleadingIcon側に表示し、タップでON/OFFを変える感じ。

leadingIconにCheckboxを配置するという方法もとれるけど、その場合MaterialDesing3のMenuの仕様とはちょっと離れたデザインになる。

こちらが Checkboxにした場合の画像。

そしてMaterialDesing3の仕様の方。

Menus – Material Design 3

Menus display a list of choices on a temporary surface. Menus can open from a variety of components, including icon butt...

Column/Rowを使った複合的なウィジェット構成

Advanced and beautiful dropdown menu in Flutter

How can I create this dropdown menu for appbar user profile icon, in Flutter?I'm using Material 3.This is an example fro...

ここに、Column/Rowを使った複合的に配置したドロップダウンメニューを表示したいんだけど、同実装したらいいかという質問がありその回答があるのだが、この回答のコードについてはそのままでは使えない。

具体的にはRowの中にMenuItemButtonをそのまま配置すると以下のような例外が発生する。

The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming width constraints are unbounded.
When a row is in a parent that does not provide a finite width constraint, for example if it is in a horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the horizontal direction.

これに関しては、例外で出るエラーメッセージの通りの対応をすれば解決はする。

RowにはmainAxisSize: MainAxisSize.minを設定し、MenuItemButtonを含む子供に対してFlexibleでラッピングする。

Row(
  mainAxisSize: MainAxisSize.min,  // 追加
  children: [
    const Padding(
      padding: EdgeInsets.fromLTRB(20, 10, 10, 10),
      child: Icon(
        Icons.person,
        size: 30,
        color: Colors.white,
      ),
    ),
    const SizedBox(
      width: 20,
    ),
    Flexible(  // 追加
      child: Column(
        children: [
          MenuItemButton(
            child: const Text("Item 1"),
            onPressed: () => {},
          ),
          MenuItemButton(
            child: const Text("Item 2"),
            onPressed: () => {},
          ),
        ],
      ),
    )
  ],
)

上記のような形にする。