Navigatorとは何か、Flutterの画面管理

FlutterのNavigatorとは

Navigator は、Routeオブジェクトのスタックを管理し、Flutterアプリケーションで画面ナビゲーションを実装するウィジェットです。pushを呼び出すたびに新しいRouteがスタックの一番上に配置され、popは一番上のRouteを削除して前の画面に戻ります。MaterialAppはアプリケーション全体に対して自動的にNavigatorを作成し、Navigator.of(context)を介してアクセス可能にします。

StatefulWidget（単一ウィジェット内でsetStateを介してコンテンツの置き換えが行われる）とは異なり、Navigator は独自のライフサイクルを持つ画面全体を操作します。スタック内の各Routeは、独自のBuildContextを持つ独立した状態であり、メモリリークを防ぎ、依存関係の管理を簡素化します。popが呼び出されると、未使用のRouteは破棄され、リソースが解放されます。

Flutterナビゲーションガイド（2026年）によると、Navigatorは命令型API（Navigator 1.0）から宣言型API（Navigator 2.0）へと進化しました。Navigator 1.0はpush/popメソッドを直接使用するため、単純なシナリオに便利です。Navigator 2.0（Router）は、ディープリンク、アダプティブナビゲーション、およびWebルーティングを備えたアプリケーションに適しています。

Navigatorの内部動作

内部では、Navigator はOverlay（Routesを互いの上に表示する特別なウィジェット）を使用します。各Routeは、スタック内の深さに対応するz-indexを持つOverlay内に自身の位置を作成します。これにより、pushを呼び出すと新しい画面が前の画面の上にアニメーション表示され、popを呼び出すと前の画面がすぐに表示できる理由が説明できます。前の画面は破棄されず、新しい画面の下のOverlayに残っていたからです。

遷移アニメーションには、Navigator はPageTransitionsThemeを使用します。これはThemeDataでオーバーライドできます。プラットフォーム固有のアニメーションは、iOSの場合はCupertinoPageRoute（右からスライド）、Androidの場合はMaterialPageRoute（下からスライド）を介して設定されます。PlatformRouteを使用する場合、Navigatorは自動的に正しいアニメーションを選択します。

Navigatorメソッド：push、pop、pushReplacement

Navigator は、Routeスタックを管理するための一連のメソッドを提供します。各メソッドは、単純な遷移から画面履歴の完全な置き換えまで、特定のナビゲーションタスクを解決します。使用例とともに主要なメソッドを確認しましょう。

PushとPop：基本操作

push メソッドはRouteを受け取り、pop時に渡された結果を含むFutureを返します。これにより、移動先の画面からデータを受信できます。たとえば、日付選択画面はNavigator.pop(context, selectedDate)を介してDateTimeを返すことができます。引数なしのpopメソッドはnullを返し、引数ありの場合は呼び出し元の画面に値を渡します。

PushReplacement：画面の置き換え

pushReplacement は現在のRouteを新しいものに置き換え、現在のルートをスタックから削除します。これは、ユーザーが前の画面に戻れないようにする必要があるシナリオで重要です。典型的な例はログイン画面です。ログイン成功後、現在の画面がメイン画面に置き換えられ、戻るボタンでログインフォームに戻ることはありません。

名前付きルートとonGenerateRoute

Navigator はpushNamedメソッドを使用した名前付きルートによるナビゲーションをサポートしています。開発者はRouteを直接作成する代わりに文字列識別子を指定すると、NavigatorがMaterialAppの設定に基づいて自動的にRouteを作成します。これによりコードが簡素化され、ルート定義が一元化されます。

名前付きルートはMaterialAppのroutesプロパティを介して定義されます。各キーはパス文字列で、値はWidgetを返す関数です。動的ルート（パラメータ付き）には、onGenerateRoute が使用されます。これはRouteSettingsを受け取りRouteを返すコールバックです。これにより、argumentsパラメータを介して引数を渡し、ディープナビゲーションを実装できます。

Flutterクックブック（2026年）によると、pushNamedを介した引数の受け渡しは、arguments: Object?パラメータを使用して行われます。受信側の画面は、ModalRoute.of(context)!.settings.argumentsを介して引数を抽出し、グローバル変数やInheritedWidgetを使用せずに型安全なデータ転送を実現します。

不明なルートの処理

MaterialAppのonUnknownRouteプロパティは、pushNamedが存在しないルートで呼び出された場合を処理します。これは404画面を表示したり、ホームページにリダイレクトしたりするのに役立ちます。onGenerateRouteと組み合わせることで、考えられるすべてのナビゲーションシナリオを完全にカバーできます。

Navigator 2.0と宣言的Routerナビゲーション

Navigator 2.0（Router APIとも呼ばれる）は、Flutter 2.0で導入された宣言的なナビゲーションアプローチです。開発者がpush/popを呼び出す命令型のNavigator 1.0とは異なり、Routerは状態を通じてナビゲーションを管理し、ブラウザのURLを現在の画面と自動的に同期します。これはWebアプリケーションやデスクトップバージョンで特に重要です。

Navigator 2.0のアーキテクチャは、3つの主要コンポーネントで構成されています。RouteInformationParser はURLをルート設定に解析し、RouterDelegate は設定をRouteのリストに変換し、BackButtonDispatcher はシステムの戻るボタンを処理します。このアーキテクチャにより、ナビゲーションは完全に予測可能でテスト可能になります。

Navigator 2.0の操作を簡素化するために、ラッパーパッケージが存在します。go_router（Google推奨）、auto_route、beamer です。go_routerは、RouterDelegateを手動で実装することなく、ネストされたナビゲーション、リダイレクト、ディープリンクをサポートするルートを定義するための宣言的DSLを提供します。pub.dev（2026年）によると、go_routerは宣言的アプローチを好む新しいFlutterプロジェクトの35%で使用されています。

Flutterアプリケーションのナビゲーション例

名前付きルートと画面間のデータ受け渡しを使用したNavigatorの例を考えてみましょう。コードは、商品一覧画面、詳細画面への遷移、および結果を伴う戻りを示しています。

// Route configuration in MaterialApp
MaterialApp(
  initialRoute: '/',
  onGenerateRoute: (RouteSettings settings) {
    if (settings.name == '/') {
      return MaterialPageRoute(
        builder: (context) => const ProductListPage(),
      );
    }
    if (settings.name == '/product') {
      final productId = settings.arguments as String;
      return MaterialPageRoute(
        builder: (context) => ProductDetailPage(productId: productId),
      );
    }
    return MaterialPageRoute(
      builder: (context) => const NotFoundPage(),
    );
  },
)

// Navigation with data passing
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Getting data on the receiving screen
final args = ModalRoute.of(context)!.settings.arguments as String;

// Replace screen after login
Navigator.pushReplacementNamed(context, '/home');

// Clear stack to main screen
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

この例では、Navigator.pushNamed が商品IDを詳細画面に渡します。Navigator.pop(context, updatedProduct)を介して戻ると、呼び出し元の画面はresult変数で更新されたデータを受け取ります。pushReplacementNamed は認証後に現在の画面を置き換え、条件(route) => falseを指定したpushNamedAndRemoveUntilはスタックを完全にクリアし、前の画面に戻るナビゲーションを防ぎます。