【FlutterFlow】ユーザ画像を送信ページに表示する方法：ドキュメント・レファレンスの送受信
はい、こんにちは！前回記事からの続きです。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をページ間で送受信する作業に戻らねば！ということで、ユーザー情報を表示するページを作りましょう！
では～。