![見出し画像](https://assets.st-note.com/production/uploads/images/115177275/rectangle_large_type_2_9aa6ddedfba1e2065a92425d1a55c42c.png?width=1200)
【FlutterFlow】参照先コレクションのデータはどう表示させるの?:ドキュメント・レファレンスの送受信
はい、こんにちは!前回記事からの続きです。FlutterFlowで、ページ間でドキュメント・レファレンスの受け渡しについて、ご紹介しています。
前回は、ドキュメント・レファレンスの送受信について学習するにあたり、作ろうとしている機能はどんなものかをご紹介しました。
これでゴールは見えました。下図のような感じですね。
![](https://assets.st-note.com/img/1693685078932-nByCfoIN3n.png?width=1200)
今回は、いよいよページの作成を進めていきましょう!
ユーザ画像を詳細ページに表示する
まずは、toDoListにあるドキュメントの一つを表示させる「やること詳細」を更新することにしましょう。
下図のように「やること詳細」ページは、前回シリーズで作りました。今回は、赤枠のところに「担当者」の画像を表示させるのが目標です。
![](https://assets.st-note.com/img/1693685575075-FD5wnHmJdS.png)
公式資料のお手本はこちらです。
![](https://assets.st-note.com/img/1693685759834-i25r0nrxft.png?width=1200)
なるほど、そんなに難しくなさそうな気がしますね。
ところがどっこい!そうは問屋がおろさない!
どうやってテキストを表示させたのか再確認!
そもそも、project_name(やること名)やDescriptionなどのデータは、どのように表示させたのでしょうか?
そう、ページパラメータが「ドキュメント」を受け取って、その「ドキュメント」から「フィールド値」を取り出して表示させたのでした。
例えば、Project_nameのテキストの変数設定は次の通りでした。
![](https://assets.st-note.com/img/1693686109878-eM7VoawpM1.png?width=1200)
ユーザ画像についても同じように、ページパラメータから取得したいですよね…。
コレクションには「ユーザID」はあるのだが?
では、ページパラメータに届くドキュメントを構成するフィールドを確認しますよ。
下図はtoDoListコレクションの内容です。
![](https://assets.st-note.com/img/1693686431286-i2vM3zUBIu.png?width=1200)
すでにproject_name、description、deadlineは、ページ中で参照された表示されていますね。残るはmemberのみですね。
これじゃユーザの画像をとれないじゃないか!と思うかもしれません。しかし、そのユーザの画像はUsersコレクションに格納されていて、このmembersフィールドを通じて取得できるはず…。
そうなんです、このMembersには「ドキュメント・レファレンス」として、UserIDを埋めてあるのですから!
レファレンス先のフィールドは取得できる?
ということで、まずは今のコレクショの状態のまま、memberフィールドのドキュメントレファレンスを通じて、Userコレクションの画像を表示できるか試しますか…。
次の通り、CircleImageを一つ置きます。
![](https://assets.st-note.com/img/1693687237532-HBy2LVh5ZC.png)
画像のパスの変数を選択します。
![](https://assets.st-note.com/img/1693687287847-rzEFR4eylc.png)
ページパラメータを選びます。
![](https://assets.st-note.com/img/1693687341331-k4ZIvetFYG.png)
フィールド参照するフィールドを選びます。memberがありますね。データの実体は、UserID値なんでけどね。これを選びますか。
![](https://assets.st-note.com/img/1693687400977-xAel4VYE07.png)
はい、ここでストップ!これ以上先に進めません。設定をキャンセルします。
![](https://assets.st-note.com/img/1693687483871-62wForoKTp.png)
MemberというTypeが「ドキュメントレファレンス」のフィールドを選択すれば、さらに参照先(Users)のフィールド値(画像のパス)が選べるのではないか、と少し期待しました。
しかし、うまくいきませんね。まあ~、思った通りですが…。はい、負け惜しみです…。
コレクションの設定を修正せねば!?
上のとおり、UIビルダー側の機能では、ドキュメントレファレンスで参照しているコレクションのフィールド値を表示させることは難しそうですね。
となれば、事前に、ドキュメントレファレンスを通じて、toDoListコレクションにUsersのフィールド値(ユーザ画像)を持ってくる作業をしないといけなさそうです。
これはただの見込みです。本当にそうかは、これから確認します。
ふ~、難しいですね。
はい、本日はここまで。今回は、やること詳細ページをどのように作るかを確認し、ユーザ画像の表示を試みました。が、ユーザ画像の表示のためには、まだ追加でコレクションの設定が必要そうです。
次回は、そのtoDoListコレクションの追加設定をやってみましょう!ああ、うまくいくかな~。
では!
この記事が気に入ったらサポートをしてみませんか?