【FlutterFlow】ユーザーが望むページへ的確に導くナビゲーション

はい、こんにちは～。FlutterFlowの使い方を読者の皆様と学習中です～。

前回は、レイアウトの基本のきのシリーズをまとめました。一つの達成感がありました。何しろUIビルダーを使うならぜひ知っておきたいことがたくさん登場しましたからね…。

今回は、ナビゲーションをやりましょう。開発者は、ユーザーが求める情報に速やかにアクセスできるようにしないといけません。それを実現するのが、Navigationというわけです。

すでに何回か使っていますが、きちんと学んだことはなかったです。きっと意外な発見があるはず。

では、ナビゲーションにレッツゴー♪

練習用にPageを３つ準備

では、ナビゲーションの練習をするために、３つのページを準備します。

私が準備したのは、次の３つのページです～。

どのページに遷移したか分かりやすいように、AppBarだけつけておきました。

Page A→PageB→PageCとユーザーを案内します。戻るときは、PageC→PageB→PageAとなります。

これで下準備はOKです。

Navigation用ボタンを追加

では、早速、PageAにボタンを追加してPageBに移動できるようにしましょう！

ページAのカラム内にRowを追加、さらにそのRowにButtonを追加します。

Rowの上/左/右のPaddingは12px、Main Axis AlignmentはCenterにしました。するとこうなります。テキストもかえておきます。安直ですがこんなんでいいでしょう。

ここらへんのレイアウトのノウハウは、前回シリーズで学んだことが多いに活かされています！積み重ねですね…。ほんとうに。

はい、ボタンは追加できました。

ボタンにアクション追加

続いて、ページ移動のアクションをつけましょう！

ボタンのプロパティで、Add Actionをクリックします。

アクションに名前をつけてあげます。トリガーとなるアクションは標準的な「On Tap」（タップ時に）でいいでしょう。

選べるアクションは大量にあるわけですが、代表的なアクションであるNavigationは、上の方に表示されます。Navigate toのPageBを選択します。

はい、これでアクション設定はOKです！

プレビューで確認

では、お楽しみ♪プレビューでアクションがうまくできているか、確認しましょう！

ボタンをクリックすると、

ボタンBが表示されました。よかった。

で、PageAに戻る、、、ことはまだできないんですよね…。一方通行。
それにデフォルトのトランジション（ページが切り替わるときの映像効果）もなんかイマイチですね。。。

はい、本日は、以上です。今回は、まずはもっとも基本的なアクションであるNavigationの基本をご紹介しました～。

次回は、もう少し機能を拡張していきましょう！

ではまた～。