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.