🧭

ナビゲーション基礎

push/popとNamed Routesで画面遷移

Flutterのナビゲーションはスタックデータ構造ベースです。Navigator.push()で新しい画面を積み、pop()で前の画面に戻ります。

Named Routesを使えばMaterialAppのroutesマップでパスを管理し、Navigator.pushNamed('/detail')のように文字列で遷移できます。

複雑なアプリではgo_routerのような宣言的ルーティングパッケージの使用が推奨されます。

実装ステップ

1

Navigator.push()で新画面遷移 + pop()で戻る

2

MaterialAppのroutesプロパティでNamed Routes設定

3

画面間データ受渡:コンストラクタパラメータまたはarguments使用

4

WillPopScopeで戻るボタンインターセプト(未保存の変更確認など)

メリット

  • 直感的なスタックベースモデル
  • 基本使用には追加パッケージ不要

デメリット

  • Named Routesは型安全ではない(文字列ベース)
  • ディープリンク、Web URL対応が限定的

ユースケース

マスター-ディテールパターン(リスト → 詳細ページ) ログイン/会員登録フロー