• 2025/3/17
• 4分

【Flutter/Dart】Navigatorで画面遷移の実装方法！MaterialPageRoute

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

• Android Studio：Koala
• Xcode：16.0
• Flutter：3.29.2
• Dart：3.7.2
• Mac M1：Sonoma 14.6.1

公式リファレンス：画面遷移(Navigator)

Flutterのナビゲーション(画面遷移)

Flutterアプリにおけるナビゲーション(画面遷移)機能はスタック構造の仕組みで構築されており、スタック構造の遷移情報は基本的に後入れ先出し(LIFO: Last In First Out; FILO: First In Last Out)で操作されます。

ページAからページBに画面を遷移する際はスタックの中に遷移情報をプッシュし、ページBからページAに画面を遷移する(戻る)際はスタックの中の遷移情報をポップすることで画面を入れ替えます。

またFlutterの画面遷移の仕組みは画面をオーバーレイする(覆い被さる)形で表示するので遷移情報をポップせずに重ね続けるとメモリがオーバーフローしてしまうことがあるので注意が必要です。

Navigator

Flutterで画面遷移を実装するときはNavigatorとMaterialPageRoute/CupertinoPageRouteの2つのWidgetが必要になります。

NavigatorはFlutterの画面遷移(ナビゲーション)を管理するWidgetです。要は遷移情報をスタック構造に追加したり、削除したりすることが可能です。

MaterialPageRoute / CupertinoPageRoute

MaterialPageRoute / CupertinoPageRoute

MaterialPageRoute/CupertinoPageRouteは画面遷移先の新しいページを作成するWidgetです。ページ遷移のアニメーション機能なども提供しており、それぞれAndroid/iOSのOSに合わせた遷移アニメーションを提供してくれます。基本的にはNavigatorを組み合わせて使用することで画面遷移機能を実装することができます。

画面遷移の実装方法

「ページAからページBに画面を遷移させる」機能を実装してみたいと思います。実装は簡単でボタンのアクション部分でpushメソッドを使用して遷移ロジックを記述します。.of(context)部分の役割は後述します。

// 画面をプッシュ
Navigator.of(context).push(
  // 画面を構築
  MaterialPageRoute(builder: (context) => const PageB()),
);

サンプルコード

class PageA extends StatelessWidget {
  const PageA({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Page A")),
      body: Center(
        child: ElevatedButton(
          child: const Text("Page B へ"),
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(builder: (context) => const PageB()),
            );
          },
        ),
      ),
    );
  }
}

画面を戻る

画面を遷移して表示された新しい画面から元の画面に戻りたい場合はpopメソッドを呼び出します。Scaffold/AppBarを使用している場合はアプリバー(ヘッダー)部部分に自動で戻る「＜」ボタンが表示されるので実装しなくても画面を戻る機能が実装されています。

class PageB extends StatelessWidget {
  const PageB({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Page B")),
      body: Center(
        child: ElevatedButton(
          child: const Text("戻る"),
          onPressed: () {
            Navigator.of(context).pop(); // Page A に戻る
          },
        ),
      ),
    );
  }
}

データの受け渡し

Navigatorでは遷移元と遷移先でデータの受け渡しが可能になっています。方法は簡単でpushの呼び出し側ではawaitを使用して結果を待機させます。

遷移元
final String? text = await Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => PageB(),
  ),
);

print(text)

遷移先側ではpopの引数に渡したいデータを渡すだけです。これでNavigatorを経由してデータの送受信が可能になります。

遷移先
Navigator.of(context).pop("データを送るよ");

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。