【FlutterFlow】どう使うの？前のページに「戻らない」というオプション

はい、こんにちは～。前回記事の続きです。FlutterFlowのナビゲーションについて学習中です。

前回は、ページを３つ（PageA、PageB、PageC）を準備して、PageAからPageBに移動するためのボタンを作りました。ごく基本的な使い方ですね。

今回は、ナビゲーションアクションのオプションを試してみましょう。ユーザーがページ間の移動をするといっても、いろんなバリエーションがありそうですよ～。

では、いってみよ～。

ボタンのアクション定義

まずは、今の状況を確認します。

PageAには、ボタンがありまして、すでにNavigate toのアクションが設定されています。

PageBに移動するアクションです。

では、そのアクション定義を改めて表示させます。単なるページ遷移ではあるのですが、なにやらいろんなオプションがありますね…。これらを試してみたい！というわけです。

Navgiate BackをPageBに設定

まず最初は、Allow Back Navigationです。直訳すれば、「戻るナビゲーションを許可する」ですね。デフォルトでONになっています。

これを検証するには、PageBに「前のページに戻る」ためのアクションを追加しておかないと検証できませんね。その設定をやりましょう。

PageBのAppBarのLeadingエリアにIconButtonを追加します。デフォルトでは+マークですね。

アイコンの体裁を変えておきます。正直言ってキャンバス右上に表示されるテンプレートを使った方が早いのですが。

このアイコンにアクションを設定します。Navgiate Backです。

これでPageBからPageAに戻ることができるようになります。

なお、プレビューするときは、PageBから始めるとうまく機能しません。なぜなら、前のページが存在しないからですね。PageAからプレビューをはじめて、PageBに移動してからNavgiate Backの動きをご確認ください～。

Allow Back NavigationをOFFにする理由は？

では、PageAのボタンのアクションに戻ります。

このAllow Back Navigationの設定をOFFにしたら何が起こるのでしょうか？PageBからPageAに戻れなくなるのでしょうか？

プレビューで確認します。エラーメッセージが出ました。ああ、本当にPageBからPageAに戻れなくなってしまいました…。

でも、このオプションをOFFにして「戻る操作」を不可にするケースってどんなものがあるでしょうか？何かありそうですが、すみません、思い浮かびません。ご存じの方、ぜひ教えてください！ブログタイトルの答えが出せずにすみません。

私たちはとりあえず、Allow Back NavigationはONにしておきましょう…。

ちなみに、Allow Back Navigationのヘルプにはこんなことが書いてあります。

曰く、「このページに戻るナビゲーションをユーザに許可するかどうかを指定します。これは、アンドロイドの戻るボタンに影響を与えません。アンドロイドの戻るボタンを無効にするには、遷移先のページでDisable Android buttonのプロパティを設定してください。」とのことです。

ほほ～、どうやらこの設定が、アンドロイドOS標準の戻る機能には影響しないけど、アンドロイドの戻る機能と重複するのがいやなら、アンドロイドの戻る機能を無効化せよ、ということですか。

なるほど、OSの違いによっても配慮しないといけないことがあるのですか。うーむ、奥が深い。。。

はい、本日はここまで。今回は、「戻る」ナビゲーションのオプションについてご紹介しました。「戻る」というアクション一つで、考慮することがいろいろあるのですね。

次回も、ナビゲーションの続きをやりましょう！

ではまた～。