【FlutterFlow】バックエンドからテキストを表示させるには？
前回記事の続きです。
前回は、Firebaseでメール認証の設定を完了し、FlutterFlowのコレクションにフィールド値を取り込めました！なんとかなった。一時はどうなるかと…。今回は、コレクションの設定に戻って、データをアプリ上で表示させる設定を、こんどこそ再開します。
レッツ・ゴー！
リスト表示に使うウィジェットは、これだ！
まずは、前回の振り返りですが、Firebaseとの接続が完了して、下図のとおりMerchコレクションのNameフィールドの値３つをFlutterFlowで使うことができるようになりました。
さあ、これらをキャンバスに表示させるのだ！いまのところ、キャンバスには、デフォルトのウィジェットのみ置かれている状態です。
さて、どんなウィジェットを追加すればいいのでしょうか。実は、アイテム数を基準に使うべきウィジェットが異なります。
もし少ないドキュメント（～20個くらい）を表示させるなら、ColumnまたはRowがベストです。
一方、ドキュメント数が多い（20個～くらい）なら、ListViewやGridViewを使いましょう。
今回は、ドキュメント数が少ない（３つだけ）から、Columnでいいでしょう。
Columnウィジェットは初期設置のものを利用
では、Columnウィジェットを追加しましょう！
と、おもったら最初からColumnウィジェットは置いてありますね。これをそのまま利用しましょう！
では、このColumnウィジェットにテキストを表示させるウィジェットを放り込まないといけないですね。
もっとも基本的なウィジェットであるTextウィジェットを入れ込みましょう。ドラッグ・アンド・ドロップでぽいっと。
はい、うまく入りました。
ふむ、ここまでOK！
バックエンド・クエリの種類を選択
では、ウィジェットとデータの紐づけをやります。カラム・ウィジェットを選択して、プロパティエリアでBackend Queryをクリックします。
するとクエリ型を選べといってきます。次の５種類です。なるほど、いろんなデータソースから値を参照できるのですね～。私たちが今必要なのは、Query Collectionです。
このQuery Collectionがもっとも基本的なデータベースです。これを選びましょう。
コレクションの詳細設定ができる！
続いて表示されるメニューの設定をします。コレクションMerchでOKです。タイプは、ListでOKです。
その他、フィルターやソートの設定ができますが、今は放っておきましょう。先に進むのだ～。
すると、え～。また、メッセージが出てきた～。すっかりエラー恐怖症です…。
なになに、、、「最初のアイテムを設定すれば、残りのすべてのアイテムの外観をセットできます」。あ～、なるほど、リストの設定をするときは、最初のアイテムだけ設定すればいいですよ、と教えてくれているんですね。ご丁寧にどうも。エラーじゃなくてよかった♪。
では、Confirmして次に行きましょう。こうなりました～。
おい、アイテムが表示されないやん。Hello Worldのままですが。これでいいわけ、、、ないですよね。。。まだ続きがあるらしい。
はい、本日はここまで。次回は、上記のテキストをコレクションの値に置き換えましょう！
Glide学ぶなら、Udemy
Glideで急いでアプリを作りたいけど、どうすれば？お気持ち察します。でも、心配いりません！UdemyならGlide初心者向けの動画コースが受講できます。このブログ300記事をベースにして生まれました。期間限定のキャンペーンもあります。気になる方は、チェックしましょう！
この記事が気に入ったらサポートをしてみませんか？