ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。

FlutterFlowで作成!テンプレートでタスク登録アプリ ー 第4回 画面遷移をしてみよう。

FlutterFlowで作成!テンプレートでタスク登録アプリ ー 第4回 画面遷移をしてみよう。

こんにちは!

今回はFlutterFlow初心者向けシリーズ「FlutterFlowで作成! テンプレートでタスク登録アプリ」の第4回「画面遷移をしてみよう。」です。

今回は、主に画面遷移に関するところを見てみようと思います。

前回のコンテンツはこちらです。 blog.nocodelab.jp

本シリーズが初めての方は、第1回目からご覧ください。 blog.nocodelab.jp

1.基本の画面遷移

まずは基本の画面遷移の方法から見てみましょう。

画面遷移はActionで行います。
SplashScreen画面で確認してみましょう。

「Register」ボタンのActionを選択します。

「Navigator To」が画面遷移のActionになっています。 「Navigator To」のプロパティで遷移先の画面(ここではRegister画面が設定されています)を選択します。
これで「Register」ボタンをクリックすると、Register画面へ遷移するようになります。

これは単純な引数なしの画面遷移です。
しかしこのように単純な遷移ではなく、画面遷移時に何かパラメータを渡したい場合がありますよね?
その場合、どうするか確認してみましょう。

2.パラメータ有の画面遷移

次にパラメータありの画面遷移について見てみましょう。

2.1.myTasks画面からtaskDetails画面へ

myTasks画面には、ステータスが済ではないタスクが一覧で表示されます。
各タスクをタップすると、taskDetails画面へ遷移する仕様になっています。

その際、どのタスクが選択されたか?というのをmyTasksからtaskDetailsへ渡す必要があります。
その時にパラメータにどのReferenceかをパラメータで渡すようにしています。

myTasks画面のListViewの子要素にあるContainerにActionが設定されています。

このActionを確認してみましょう。
Actionは基本画面遷移と同じ「Navigator To」ですが、Parameterが設定されていますね。

Parameterの設定方法は、まず、Parameter名を選択します。
ここでは「toDoNote」を選択します。(後述しますが、遷移先の画面にてParameter名は定義されています)

値の設定をします。ここでは、ToDoListのReferenceを設定します。
ToDoList Documentは、ListViewでQueryされるDocumentになっています。

このParameterは、遷移先画面のPage Parameterと紐づいています。
遷移先画面でPage Parameterを設定することで、画面遷移時にパラメータを渡すことができるようになります。
では、次にtaskDetails画面の設定を見てみましょう。

2.2.Page Parameterの設定

taskDetails画面を選択すると、右パネルの上に「Page Parameter」とあり、 「toDoNote」という名称で設定されていることが分かります。

Parameterの詳細な設定をみると、ToDoListのDocumentReferenceが型として設定されていますね。

TaskDetails画面のPage Parameterについては、第2回の3.3.1.Page Parameterの項でも触れていますので、こちらも参考にご覧ください。

blog.nocodelab.jp

3.実装してみよう

では、画面遷移の方法がわかったところで、テンプレートの修正をしてみましょう。

RobinDoでは、登録したタスクの一覧として、

  • myTasks(未完了のタスク一覧)
  • CompletedTasks(完了したタスク一覧)

と、2種類の画面があります。
どちらもリストが0件の場合、コンポーネントの「emptyList_tasks」が表示されるようになっています。

「emptyList_tasks」コンポーネントをみると、「You don't have any tasks」とテキストが表示されるようになっています。

ただ、この文言だと、未完了のタスクがないのか、完了済みのタスクがないのかわかりませんね。

なので、myTasks画面では「未完了のタスクはありません」、CompletedTasks画面では「完了済みのタスクはありません」と表示されるようにしようと思います。

3.1.Component Parameterの設定

画面の場合は「Page Parameter」ですが、コンポーネントだと「Component Paramenter」になっていますが、 画面間のパラメータと同様の設定方法になっています。

では、「emptyList_tasks」コンポーネントを開きましょう。
右上に「Component Parameters」があるので、そこを開きます。

「+」アイコンを押下し、「Add Parameter」ボタンを押下します。

どちらの画面から遷移されたがわかるようにパラメータでフラグを渡すようにしてみましょう。

以下のように設定します。

項目名 備考
Parameter Name isFromMyTasks 遷移元がmyTasksからどうかフラグ
Type Boolean true:myTasks画面からの遷移
false:myTasks画面以外から
の遷移とします。

入力したら、忘れずに「Confirm」ボタンを押下してください。

これで、パラメータの定義ができました。

それでは呼び出し元に設定しましょう。

3.2.呼び出し元のパラメータ設定をしようーListViewの0件について

今回はmyTasks画面とCompleted Tasks画面からemptyList_tasksコンポーネントを呼ぶようになっていますが、 少しわかりづらいところから呼ばれています。

どちらの画面も表示対象の一覧が0件の場合のみemptyList_tasksが表示されます。

myTasks画面を例に見てみましょう。

一覧を表示する際に使用するWidgetは、ListViewになりますが(BubbleでいうところのRepeating Groupにあたります)このList ViewのWidgetに、一覧が0件の場合、何を表示するかを設定する「Empty List Widget」というプロパティがあり、これを利用しています。

設定内容は以下の通りです。

項目名 備考
Show Empty List Widget ON Empty List Widgetを使用する場合、ONにします。
Widget Type Component ImageまたはComponentの選択のみになります。
単純にメッセージのみを表示したい場合でも、このプロパティを使用する場合は、画像またはComponentを用意する必要があります。
Component Name emptyList_tasks 表示対象のコンポーネントを選択します。
Center Component ON 中央で表示する際に、ONにします。

さらに、今回「emptyList_tasks」コンポーネントに追加したパラメータを設定しましょう。

「Pass」というボタンがありますので、クリックします。

クリックすると、先ほど追加した「isFromMyTasks」と表示されるので、値を設定しましょう。

項目名 備考
Parameter isFromMyTasks パラメータ名称です。
ValueSource Specific Value 固定値または変数の選択になります。ここでは固定値なので、「Specific Value」を選択します。
Value True myTasks画面はTrue、CompletedTasks画面はFalseを設定します。

これをCompletedTasks画面のListViewでも同じように設定してください。
ただし、パラメータのValueは「False」です。

これで設定できました。

ちなみに、「Define」ボタンを押下すると、対象のコンポーネントの画面設定へ遷移され、そのままパラメータの設定が可能です。

3.3.条件によって表示内容を変更させよう。

パラメータを渡すことができましたが、肝心の表示の切り替えを行っていないので、それも設定しましょう。

再度「emptyList_tasks」コンポーネントを開いてください。

「You don't have any tasks」と書かれているTextWidgetを選択してください。
そのテキスト内容設定の上に「Set from Variable」というリンクがありますので、ここから設定します。
定型文の表示ではない場合、ここから設定します。

「Set from Variable」を押下すると、どこから表示するのか選択画面がでてきますので、そこから「Conditional Value(If/Else/Then)」を選択してください。 条件を付ける場合は、これを選びます。

「IF」の「UNSET」をクリックし、「Component Parameters」の「isFromtMyTasks」を選択してください。

Valueの設定があるので、
IFのところに「未完了のタスクはありません。」
ELSEのところに「完了済のタスクはありません。」
と設定しましょう。

最後に忘れずに「Confirm」ボタンを押下します。

下図のようにテキストが変わっていたら、設定完了です。

3.4.確認してみましょう。

TestModeを起動して、myTasks画面、CompletedTasks画面をそれぞれ表示して確認してみましょう。

それぞれの画面を表示すると、先ほど修正した文言がそれぞれ表示されていますね。
※確認する際は、タスクが0件の状態で確認してくださいね。

4.Nav Barについて

基本的な画面遷移とパラメータ付きの画面遷移を確認しましたが、もう一つ「Nav Bar」を使った画面遷移も見てみましょう。

「Nav Bar」はいわゆるナビゲーションバーです。 画面でいうところの、画面の一番下にある部分です。
このアイコンをクリックすると、各画面へ遷移するようになっています。

4.1.Nav Barを有効化する

Nav Barを使用するには、まず有効にする必要があります。
Settings and IntegrationsからNavBar & AppBarを選択します。

一番上に「Show Nav Bar」というトグルがあります。それをONにすると使用できるようになります。
RobinDoテンプレートでは、既に設定済みなので、ONになっていますね。

設定画面は、myTasks、Completed Tasks、MyProfile画面に設定されています。
ちなみに、Re-Order Page Iconsの左のアイコンをドラッグすると、順番が変更できるようになっています。

では、実際に画面ではどのような設定になっているか確認してみましょう。

4.2.Nav Barの設定

myTasks画面を見てみましょう。
myTasksを選択すると、「Nav Bar Item Properties」というプロパティがあります。
Nav Bar Item Properties の「Show on Nav Bar」のトグルをONにすると、 Nav Barに設定したアイコンが表示され、Nav Bar自体も表示されるようになります。

Nav Bar の設定内容は、以下の通りです。

項目名 備考
Label -- アイコンのラベルです。NavBarのレイアウト種類によって、表示されたり、フォーカスが当たった時に表示されます。
わかりやすい名前を付けたほうが良いかと思いますので、適当に付けなおしましょう。
Nav Bar Icon Playlist Add アイコン Nav Barで表示するアイコンです。
Icon Size 32 アイコンのサイズです。
Different Active Icon ON 対象のページを表示しているときに表示するアイコンを設定します。
ただし、RobinDoでは同じアイコンを設定しているので、OFFにしているのと同じになります。
Nav Bar Icon(Different Active Icon) 32 Nav Barで表示するアイコンです。
Icon Size(Different Active Icon) 32 アイコンのサイズです。

アイコンの設定は、各画面になりますが、アイコンの色はSettings and IntegrationsからNavBar & AppBarのから設定できるようになります。

4.3.Nav Barの設定(表示のみしたい場合)

上記のように、各画面の「Nav Bar Item Properties」を設定すると、Nav Barにアイコンが追加され、Nav Bar自体も表示されますが、
Nav Barにはアイコンを表示したくないけど、Nav Bar自体を表示したい場合ありますよね?

RobinDoのテンプレートでは「Nav Bar Item Properties」を設定していない画面以外はNav Barは表示されないのですが、他の画面にも表示するように設定を変更してみましょう。

まずは、Deep Linkを有効にしましょう。

※Deep Linkとは、簡単に言うと直接URLからアプリが起動するというものです。

Settings and IntegrationsのAppDetailsのDeep Linking & Routingの「Enable Deep Linking」のトグルを有効にします。

さらに、Nav Barのレイアウトを変更する必要があります。
Settings and IntegrationsからNavBar & AppBarのLayoutにNav Bar Styleという項目があります。プルダウンになっており、以下の3つから選択できるようになっています。

  • Flutter Default Nav Bar
  • Google Nav Bar
  • Floating Nav Bar

おそらく、現在は「Flutter Default Nav Bar」が選択されていると思いますが、 これ以外を選択してください。

これで準備はできました。

それでは、Nab Barを表示だけしたい画面を開きます。 ここではTaskDetails画面を開いています。

Nav Bar Item Propertiesの「Always Show Now Bar on Page」のトグルをONにしましょう。

ONにすると、下図のようにTaskDetails画面にもNav Barが表示されました。

※上図では、myTasksへ遷移するアイコンのラベルに「myTasks」を設定しています。

これで、Nav Barにアイコンを追加しなくても、Nav Bar自体を表示することができました。

4.4.Deep Linking & Routing 有効時の注意点について

Nav Barを表示のみの対応の時に、Deep Linking & Routing を有効にしました。

これにより、外部からでもアクセスできるようになりました。
そのため、ログイン後に表示させたい画面でも、アドレスさえわかってしまえばアクセスできるようになってしまいますので、認証が必要な画面は制限する必要があります。

Deep Linking & Routingを有効にすると、各画面に「Route Settings」が表示されます。そこに、「Requires Authentication」というチェックボックスがあるので、これで制限します。

  • チェックが入っている → 認証状態のみ表示可能
  • チェックが入っていない → 認証されていなくても表示可能

となります。

下図はCompleted Tasks画面ですが、この画面は認証必要なため、チェックオンにします。

今回のアプリで認証不要な画面は以下の3つになりますので、それ以外の画面にチェック入れるようにしてください。

  • Splash Screen (※Entry Pageに設定している画面のため、チェックボックスは表示されない)
  • Register
  • Login

また、Deep Linking & Routingの「Pages Require Authentication by Default」のトグルをONにすると、SplashScreen画面以外チェックオンの設定になります。

ただし、このままだと、Register、Login画面の未ログインで表示すべき画面もチェックオンになっていますので、両画面はチェックを外すようにしましょう。
認証不要な画面が少ない場合は、こちらの方法の方がラクに設定できますね。

Deep Linking & Routingを有効にする場合は、こちらに注意するようにしてください。

5.まとめ

今回は主に画面遷移に関することについて確認してきました。
画面間のパラメータについては、 Bubbleとは異なり、遷移先の画面でParameterの名称、型を設定するようになっています。
この方が、名称や型を間違えなくて済むので便利ですね!

また、ナビゲーションバーも設定さえすれば簡単に設置できますね。

ここまで読んでくださり、ありがとうございました!

コンテンツ

第1回 はじめてみよう。

第2回 テンプレートを色々みてみよう。

第3回 アカウント作成をしてみよう(1)

第4回 画面遷移をしてみよう。(今回です)

第5回 ユーザー編集を修正してみよう。

第6回 タスク一覧を修正してみよう。

第7回 エラーメッセージを出してみよう(1)

第8回 エラーメッセージを出してみよう(2)

第9回 アカウント作成しよう(2)

※ コンテンツが追加されるとリンクされるようになります。今しばらくお待ちください😌

※全9回の予定ですが、内容やボリュームによって前後する可能性もあることをご了承ください。