【FlutterFlow】来た道の一部を省略して元のページへ戻れ：Replace Route

はい、こんにちは～。前回記事からの続きです。FlutterFlowのナビゲーションを絶賛練習中です～。

前回は、ナビゲーションのオプションのうち、Allow Back Navigationを扱いました。デフォルトでONになっていますが、これをOFFにすると遷移先のページからもとのページに戻る機能をアプリ側で提供できなくなりました。最適なユースケースがイマイチ思い浮かばなかったのですけれども…。

今回は、もう一つのオプション「Replace Route」（経路を置きかける？）をご紹介したいと思います。いったい何ができるのかしらん?

よーし、レッツゴー♪

Replace Routeとは？

まずは、Replace Routeとは、何者か確認しましょう！「ルートを置き換える」と言われてもよく分かりませんがな。

Nagivate アクションのプロパティにあるReplace Routeのオプション

公式資料の解説を確認します。

ユーザーがページA→ページB→ページCと移動した場合、ページCで戻るボタンを押すと通常ページBに戻ります。ふむ、そうですね。

が、このページBのアクションで「Replace route」を有効にすると、そのルートでは、ページBがすっ飛ばされて、ページA→ページCとなるようです。ページCで戻るボタンを押すとページAに移動するようになります。

ということは、行きは「ページA→ページB→ページC」で、帰りは「ページC→ページA」になるということか？

うぬぬ、確信が持てない。検証しましょう！

三つのページを移動できるように準備

このReplace routeの動きを検証できるように、３つのページに最低限の導線を作りました。

次の通り、ページA→ページB→ページCと移動し、帰りはBackボタンでページC→ページB→ページAと移動する導線ができました。

直列に移動するよくある導線ですね。

ページBにReplace routeを設定

では、ボタンのNavigate to アクションにReplace Routeを設定します。って、どこのボタン？ページBにあるボタンです。経路中の真ん中のページですね。

アクションのオプションにあるReplace RouteをON！！

よし、、、プレビューで確認だ！

プレビューでうまくいかない？

仮説は、こうです。行きは「ページA→ページB→ページC」で、帰りは「ページC→ページA」になる。

果たしてどうなる？

結果は、、、何も変わりません～？？。行きは「ページA→ページB→ページC」で、帰りは「ページC→ページB→ページA」になりました～。

PageCのNavigate Backボタンをクリック

PageBに戻った…。

ぐぐぐ、、オプションの機能が再現できない。。。

テストランでどうだ！？

何がいけないんだよ～。えっ、「テストランさせたらどうだ？」そうか、UIの機能を全部使うならテストランにしないといけませんね。ページ遷移くらいならプレビューでいいかなと思ったのですが。

いちおう、、、、テストランさせますか。

結果は、こちら。

ページCからの、、、、

ページA！！！きちんとページBがスキップされましたよ～。

よかった、再現できて。。。ということで、ページをさかのぼる際、中間のページをスキップされたい方は、Replace Routeをお試してください！

久しぶりに焦ったｗ。

はい、本日は以上です。今回は、Nagivate アクションのオプションであるReplace Routeをご紹介しました。ページを戻る際、必ずしも通ってきた経路を通る必要はないですからね。使い途は、けっこうありそうですよ！

次回もNagivate アクションのオプションをやりましょう！

では～。