🗂

画面遷移

2024/05/20に公開

画面遷移の仕方備忘録

アプリに不可欠な画面遷移のやり方はもう記事が出尽くしているかもしれませんが、自分が覚えるという意味でも自分でまとめていきたいと思います。

ほとんどのアプリで実装されている画面遷移ですが、私はNavigator.popとNavigator.push以外の……というかほとんど全部のメソッドを雰囲気で使っているので、この機会にちゃんと調べることにしました。
画面遷移の方法について調べてみたところ見つけたのは以下。

つまりこれだけたくさんの実装ができるということですね。バリバリの初心者なのでpopとpushしか見たことないけど調べるとこんなにあるとは。

一つずつ詳しく調べていきます。

Navigator.push
これは一番使われている気がします。新しい画面に遷移する時に使うメソッドですね。調べてみると「新しい画面をスタックに追加して遷移する」と……進む遷移でよく見ます。一番シンプルです。
Navigator.pop
遷移した先のページから前のページに戻る時にこれを使っています。現在の画面をスタックから取り除き、前の画面に戻るという動きをするみたいです。試しに最初のページでこれを使ってみるとsimulatorの画面が真っ暗になってしまいました。最初の画面に使うと前の画面がないのでバグになってしまうということですかね。
Navigator.pushReplacement
現在の画面を新しい画面で置き換えるもの。画面を上に重ねるのではなく置き換わっているので戻れなくなるらしいです。ログイン画面など一方通行の・戻る必要がないもので使う様子。
Navigator.pushNamed
これは事前にルートを定義しておく必要があるようです。定義した名前付きルートを使用する遷移方法。

  routes: {
    '/newPage': (context) => NewPage(),
  },
);

こんなふうにルートを定義して、画面遷移を実装したいところで以下のように書く↓

Navigator.pushNamed(context, '/newPage');

ページを一ページずつ戻って進んで……としていたらSNSのようなアプリは煩雑になってしまいますから、ワンタップで指定ページに遷移する実装をしたいときはこういうものを使えばいい……ということでしょうか。

Navigator.pushReplacementNamed
現在の画面を名前付きルートで置き換える。置き換えるため元のページには戻れません。Navigator.pushNamedと似ていますが、違いは前の画面に戻れるか戻れないかです。pushReplacementNamedのほうは、画面遷移した後、画面遷移前のページをナビゲーションスタックから削除するため、戻ろうとしても戻れませんが、pushNamedの方は画面遷移前のページがスタックに保持されるため戻れるようです。

詳細ページに遷移し、戻って一覧ページに戻りたい場合などはpushNamed
ログイン後にホームページに遷移し、戻る操作でログインページに戻りたくない場合などはpushReplacementNamedという感じですかね。

Navigator.popAndPushNamed
現在の画面を名前付きルートで置き換え、古い画面をスタックから取り除く。
pushReplacementNamedと似ていますが動作が微妙に違う……？

popAndPushNamedは「現在のページをポップ（削除）し、新しいページをプッシュ（追加）」
pushReplacementNamedは「現在のページを新しいページで置き換える」
ので、削除してから追加するか、そのまま上書きするかの違いでしょうか。

ログイン時の画面遷移で使うpushReplacementNamedとフォーム送信後の確認画面遷移などで使うpopAndPushNamedって感じかな。

Navigator.pushAndRemoveUntil
新しい画面をスタックに追加し、指定した条件に合うまでスタックの他の画面をすべて削除するもの。
ログアウトした後戻るボタンを押したらログイン済みの画面に戻る……ということがないように、ログアウト時の画面遷移にはこれを使えば良さそうです。
Navigator.canPop
現在の画面から前の画面に戻る操作が可能かどうかを確認するために使用されるメソッド。bool値を返すもので、pop操作が可能であればtrue、それ以外の場合はfalseを返します。

Navigator.popと組み合わせて、if文で使うことが多いようです。trueならNavigator.popを呼び出して戻る、falseなら別の挙動を……というように、戻れる場合と戻れない場合を分けることができるものみたいです。

Navigator.maybePop
スタックに戻ることができれば戻り、できなければ何もしないというもの。言い換えれば戻る指示があったときには戻り、キャンセルされれば画面は変わらない……という感じでしょうか。

フォーム入力中に画面を移動する時、アプリを閉じようとする時などに、「画面を移動しますか？」「はい」「いいえ」のような確認のダイアログを表示する時に使えそうです。

Navigator.of(context).popUntil
特定の条件に合うまで画面を戻るというもの。スタックされたすべての画面をクリアしてホーム画面へ戻りたい場合などですかね。あとはログアウトする時とか。

最後まで見てくださってありがとうございました。
画面遷移ひとつとっても、調べていくと色々な実装方法があるので、複雑なアプリを開発したいときはこういうものを使えばいいんだなと勉強になりました。