FlutterのNavigatorの仕組み

自己紹介

初めまして、アウトプット太郎といいます。
Flutterに精通したエンジニアになるため、インプットをしていましたが、
身につけるにはアウトプットするのが良いと思い、基本的なことからになりますが、投稿していきたいと思います。

背景

アプリで画面遷移をする際、Navigatorを使っていたんですが、
その仕組みを理解したくまとめてみました。

routeとは

Flutterでの画面遷移はルート(route)という単位で管理されます。
そして一つの画面は一つのルートとして扱われます。

例えば画面Aから画面Bに遷移した時、
内部では[画面A,画面B]という形でrouteがスタックされます。
横で並んでいるとどっちが新しいかわかりにくいですが、
お皿Aの上にお皿Bが乗っているイメージです。

そしてそのrouteを管理するウィジェットがNavigatorになります。

Navigatorの持つメソッド

push: 新しいルートをスタックの上に追加する。
→新しい画面へ遷移する。

pop: 現在のルートをスタックから削除する。
→前の画面へ戻る。

pushReplacement: 現在のルートを新しいルートで置き換える。
→新しくスタックを作り直し、新しい画面へ遷移する。

pushNamed: 名前付きルートを使用して新しいルートをスタックの上に追加する。
→予めmain.dartなどでrouteを作っておき、以降はその定義を呼び出して画面遷移する。

void main() {
  runApp(MaterialApp(
    // 名前付きルートを定義
    routes: {
      '/': (context) => HomeScreen(),  // ホーム画面
      '/second': (context) => SecondScreen(),  // 2番目の画面
      '/third': (context) => ThirdScreen(),  // 3番目の画面
    },
    initialRoute: '/', // 初期のルート
  ));
}

popUntil: 指定したルートまでスタックからルートを削除する。
→指定した画面まで戻り、その間のスタックを削除する。

その他のNavigatorメソッド

canPop:true or falseを返し、popできるかを判定できる。
→canPopで検証しtrueであれば戻るボタンを出すなどの制御ができる。