はい、こんにちは！前回記事からの続きです。FlutterFlowで、ページ間でドキュメント・レファレンスの受け渡しについて、ご紹介しています。

前回は、レファレンス先のフィールド（ユーザの画像）を、レファレンス元のコレクション（toDoList）で呼び出そうとしましたができませんでした。これは、UIビルダーを使って実現するようです…。

これを受けて、今回は、データマネジャでtoDoListにユーザー画像フィールドを追加します。下図の「やること詳細」に表示させる画像のソースとして、そのフィールドを参照します。

データの持ち方として、明らかに冗長です。

せっかくDocument Referenceを設定したのですから、Usersのドキュメントから画像のパスをもってくるのが、データベース的に正しいです。が、今回はお許しを！

よし行ってみよ～。

ToDoListコレクションにユーザ画像用のフィールドを追加

では、toDoListのコレクションを表示させます。

まずは、フィールドの追加を行います。フィールド名は、member_photoとしました。Data Typeは、ImagePathですね。

データマネジャで画像パスを追加

続いて、データマネジャに移動します。

ここで先ほど追加したmember_photoカラムに画像のパスを追加します。

買い物は田中さん、引っ越しは八木さん、エアコンは山田さんが担当だったな…。対応関係に注意しつつ、画像をアップロードしますよ。

下図はドキュメントの内容を管理しているところです。赤枠のメニューをクリックして画像を追加します。

はい、無事アップロードできました。データマネジャの一覧表示で、すべてのカラムを表示できないようで、イマイチ成功した確信が得られないのですが、まあ、いいでしょう。

やること詳細ページのウィジェットを準備

データの準備は終わったところで、UIビルダーに戻って「やること詳細」ページにユーザ画像を表示させます。

やること詳細ページは、今、下図のとおりです。CircleImageの位置が微妙ですし、もうちょっと、見た目を整えますか…。

はい、次のとおりとなりました。CircleImageをRowでラップして、テキストとへ入れるさせました。そのテキストは、静的な値として「担当者」を入力しておきました。

ここら辺のレイアウトは、昔に比べると慣れてきたな～。

ページパラメータから画像フィールドを指定

ウィジェットは準備できたので、CircleImageのソースを指定しないといけないですね。

この詳細ページの値は、ページパラメータで受け取ったドキュメントからフィールドを取り出して指定したのでした。覚えてます？下図のとおりです。

ユーザ画像も同様のはずですね。ということで、CircleImageのパスを下図のように設定します。

よし、テストラン！

はい、では設定がうまくいったからテストランします～。

やることリストを開き、「引っ越し業者の見積もり」をクリック。八木さんの画像が表示されるか…。

やりました～。表示できました、ユーザの画像！

はい、本日はここまで！今回は、toDoListコレクションに画像用のカラムを追加して、さらにそれを「やること詳細」ページに表示させました！

内心は、薄氷を踏む思いでしたよ。だいたいつまづきますからね…。データ回りの作業は…。

次回は、Document Referenceをページ間で送受信する作業に戻らねば！ということで、ユーザー情報を表示するページを作りましょう！

では～。