Flutterの画面移行Navigator.pushとNavigator.pop

この記事では、Flutterの画面移行Navigator.pushとNavigator.popについて書いていきます。

画面移行について
1. ①何のデータのやり取りなしで次に進む
2. ②前の画面に戻る
画面移行のコード一覧
サンプル

画面移行について

画面移行には

①何のデータのやり取りなしで次に進む

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const NextScreen(), // 遷移先のWidget
  ),
);

Navigator.push関数（メソッド） で、画面を新しく積み重ねる処理を実行します。

contextは第1引数 です。「今どの画面にいるか」という位置情報（BuildContext）を渡しています。

MaterialPageRouteは第2引数 です。「どのようなアニメーション・見た目で、どの画面に遷移するか」というルート情報（Route）を渡しています。

MaterialPageRuteを詳しく見る

「クラスのインスタンス化（作成）」を行っており、そこでも引数を渡しています。

MaterialPageRoute(
  builder: (context) => const NextScreen(), // ← MaterialPageRouteに対する「引数（名前付き引数）」
)

builder:
- MaterialPageRoute の名前付き引数（Named Parameter）です。
(context) => const NextScreen()
- 引数 builder に渡している 「画面を作る関数（アロー関数）」 です。Flutterは必要になったタイミングでこの関数を実行し、新しい画面（NextScreen）を描画します。

②前の画面に戻る

Navigator.pop(context);

を使います。

画面移行のコード一覧

画面移行には4種類のメソッドがあります。

操作	コード	仕組み・使用場面
画面を進める	Navigator.push(…)	現在の画面の上に、新しい画面を積み重ねます（一番よく使う）。
画面を戻す	Navigator.pop(context)	一番上の画面を取り除き、前の画面に戻ります。
画面を置き換える	Navigator.pushReplacement(…)	現在の画面を捨てて新しい画面を表示します。（例: ログイン画面 → ホーム画面）
全画面を削除して遷移	Navigator.pushAndRemoveUntil(…)	過去

サンプル

サンプルは19行目と43行目です。

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: FirstScreen()));
}

// 1. 最初の画面
class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('画面 1')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 次の画面へ遷移
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondScreen()),
            );
          },
          child: const Text('次の画面へ'),
        ),
      ),
    );
  }
}

// 2. 次の画面
class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('画面 2')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 前の画面へ戻る
            Navigator.pop(context);
          },
          child: const Text('戻る'),
        ),
      ),
    );
  }
}