【Flutter】PopupMenuButtonで画面遷移したいけど出来ない人へ。

今回作るもの

PopupMenuButton(以後ポップアップ)、PopupMenuItem(以後アイテム)を使い画面遷移するボタンを作ります。
私もそうでしたが、ポップアップで画面遷移する方法を解説している記事が少なく、実装する際に困ったのでここに書き留めておきます。

まとめるもの

今回は以下の二つのボタンをポップアップにまとめていきます。

IconButton(
    onPressed: () {Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const folder()));
    icon: const Icon(Icons.folder)),
IconButton(
    onPressed: () {Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const Add()));
    icon: const Icon(Icons.add)),

結論

理解できる方は読みたくない思うので先に結論です。
解説を見たい方は下へどうぞ。

PopupMenuButton(
    itemBuilder: (context) {
        return [
            const PopupMenuItem(
                value: 1,
                child: Text("Folder"),
            ),
            const PopupMenuItem(
                value: 2,
                child: Text("Add"),
            ),
        ];
    },
    onSelected: (int value) {
        if (value == 1) {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => const Folder()));
        } else if (value == 2) {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => const Add()));
        }
    },
),

解説

このコードは、PopupMenuButtonウィジェットを使用してポップアップメニューを表示します。PopupMenuButtonウィジェットは、ボタンを押すとポップアップメニューが表示されるウィジェットです。

itemBuilderプロパティには、ポップアップメニューに表示するメニュー項目を返す関数を指定します。この関数は、コンテキストを受け取ります。コンテキストは、ウィジェットが表示されている画面に関する情報です。

このコードでは、itemBuilderプロパティに次の関数を指定しています。

return [
    const PopupMenuItem(
        value: 1,
        child: Text("Folder"),
    ),
    const PopupMenuItem(
        value: 2,
        child: Text("Add"),
    ),
];

この関数は、2つのメニュー項目を返します。1つ目のメニュー項目は、値が1で、テキストがFolderです。2つ目のメニュー項目は、値が2で、テキストがAddです。

onSelectedプロパティには、メニュー項目を選択した際に呼び出される関数を指定します。この関数は、選択されたメニュー項目の値を受け取ります。

このコードでは、onSelectedプロパティに次の関数を指定しています。

if (value == 1) {
    Navigator.push(context,
        MaterialPageRoute(builder: (context) => const Folder()));
} else if (value == 2) {
    Navigator.push(context,
        MaterialPageRoute(builder: (context) => const Add()));
}

この関数は、選択されたメニュー項目の値によって、次の処理を行います。

値が1の場合、Folder()を表示する画面に遷移します。
値が2の場合、Add()を表示する画面に遷移します。
以上の説明で、このコードの動作は理解していただけたと思います。