はじめに
こんにちは。
今回は、flutterを使っている方にはお馴染みなNavigatorの中身がどのようになっているのか、どういう仕組みで、動いているのかコードやドキュメントを見ながら理解を深めていければと思います。
なおこの記事は、画面遷移の仕方を提供するものではありません。
なぜ学ぶのか
正直にいうと、画面遷移の裏側でどのような挙動が起きているのかなんて知らなくても十分に実装できます。
まだブラウザバックしないでね。。
ですが、画面遷移時のロジックを知ることにより、
画面遷移時のバグを効率よく解決できたり、
実装時に保守性の高く、
パフォーマンスを考慮できるコードを書くことに繋がります。
何より普段何気なく使っているロジックがどのように動いているのかを勉強することはそれ自体が面白いですしね。
気になる方は以下に公式ドキュメント貼っておくので、
見てみる事をお勧めします。
Navigatorの仕組み
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const SecondView(),
),);
よく使う画面遷移のロジックですが、このNavigatorクラスを実際に見ていきましょう。
注目してほしいのは、以下の引数です。
this.pages = const <Page<dynamic>>[],
pagesという引数はPage型を要素にできるリストとして宣言されているようです。
ではこのPageとはどいうクラスなのか見ていきます。
/// * [Navigator.pages], which accepts a list of [Page]s and updates its routes
/// history.
abstract class Page<T> extends RouteSettings {
/// Creates a page and initializes [key] for subclasses.
///
/// The [arguments] argument must not be null.
const Page({
this.key,
super.name,
super.arguments,
this.restorationId,
});
どうやらRouteSetteingというクラスを継承している子クラスのようですね。
RouteSetteingがどんなクラスなのかというと、
遷移している画面のデータを保存しているクラスの様ですね。
整理するとつまり、Navigatorのpagesという引数は、
現在遷移している画面をリストで管理している変数と言えそうです。
もう少しわかりやすく話すと、
A,B,C,Dの画面があるとしましょう。
A画面はB画面に遷移することができ、BはCに遷移可能、CはDにと言った具合だと仮定しましょう。
初回ビルド時には、Aが表示されるものとすると、
Navigatorクラスのpagesは初回ビルド時に以下の様になります。
pages = [A]
///あくまでこれはイメージでです。
B画面に遷移した際は、
pages = [A,B]
///あくまでこれはイメージでです。
一個飛ばしてD画面まで遷移した際は、以下の様になります。
pages = [A,B,C,D]
///あくまでこれはイメージでです。
D画面からA画面までNavigator.popで戻った場合は、以下です。
pages = [A]
///あくまでこれはイメージでです。
また、ここで注目したいのが、
このpagesは、Stackで管理されているということです。
StackというWidgetを使ったことがある人がほとんどだと思います。
Stack(
children: <Widget>[
Container(
width: 100,
height: 100,
color:Colors.green
),
Container(
width: 50,
height: 80,
color: Colors.orange,
)
],
)
Navigator.pagesの引数に変化があったときにその変化を検知し、Stack内のデータをリフレッシュしています。
このように、遷移している画面のデータを積み重ねることによって、
画面遷移のロジックを実現しているんですね。面白い。
参考記事
最後に
最後までご覧いただきありがとうございました。
間違いや、ご指摘等ありましたら、コメントいただけますと幸いです。
よろしくお願いします。