Flutterの画面遷移｜Navigator.pushとpopの基本

Flutterの画面遷移は、アプリらしい体験を作るための基本です。最初はNavigator.pushで次の画面へ進み、Navigator.popで戻る流れを理解すれば十分です。

この記事の結論

小さなアプリではNavigator.pushとpopから始めます。URL、ディープリンク、認証リダイレクトが必要になったらgo_routerを検討します。

2つ目の画面を用意する

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("詳細")),
      body: const Center(child: Text("Detail")),
    );
  }
}

pushで進む

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => const DetailPage(),
  ),
);

popで戻る

Navigator.of(context).pop();

値を渡す考え方

詳細画面へIDやタイトルを渡したい場合は、コンストラクタ引数として受け取る形から始めると分かりやすいです。

class DetailPage extends StatelessWidget {
  const DetailPage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Text(title);
  }
}

実装後に確認すること

• push先のWidgetが意図通りか
• 戻る導線があるか
• 渡す値をコンストラクタで明示しているか
• 複雑になったらgo_routerへ分ける判断ができるか

よくあるつまずき

• contextが使えない場所でNavigatorを呼ぶ
• 戻る必要がない遷移までpushする
• 画面間で大きなオブジェクトを渡しすぎる
• URL対応が必要なのにNavigatorだけで押し切る

次に読む記事

• Flutter go_routerの使い方｜ルート定義と画面遷移の基本 — Flutterのgo_routerを初心者向けに解説します。GoRouter、GoRoute、MaterialApp.router、context.go、context.pushの基本を整理します。
• Flutter StatefulWidgetの使い方｜状態を持つ画面を作る基本 — FlutterのStatefulWidgetを初心者向けに解説します。StatelessWidgetとの違い、Stateクラス、setState、カウンター例を使って状態更新の流れを整理します。
• Flutter Containerの使い方｜余白・背景色・サイズ指定の基本 — FlutterのContainerを初心者向けに解説します。サイズ、余白、背景色、角丸、中央配置など、画面レイアウトでよく使う基本を整理します。

まとめ

Flutterの画面遷移はNavigator.pushとpopから始めるのが分かりやすいです。複雑なURL設計が必要になったらgo_routerへ進みましょう。