![見出し画像](https://assets.st-note.com/production/uploads/images/115523532/rectangle_large_type_2_d5de87815655b9383554e6b4d6195ae4.png?width=1200)
【FlutterFlow】ユーザ画像を送信ページに表示する方法:ドキュメント・レファレンスの送受信
はい、こんにちは!前回記事からの続きです。FlutterFlowで、ページ間でドキュメント・レファレンスの受け渡しについて、ご紹介しています。
前回は、レファレンス先のフィールド(ユーザの画像)を、レファレンス元のコレクション(toDoList)で呼び出そうとしましたができませんでした。これは、UIビルダーを使って実現するようです…。
これを受けて、今回は、データマネジャでtoDoListにユーザー画像フィールドを追加します。下図の「やること詳細」に表示させる画像のソースとして、そのフィールドを参照します。
![](https://assets.st-note.com/img/1694030693269-lUf3CtluLf.png)
データの持ち方として、明らかに冗長です。
せっかくDocument Referenceを設定したのですから、Usersのドキュメントから画像のパスをもってくるのが、データベース的に正しいです。が、今回はお許しを!
よし行ってみよ~。
ToDoListコレクションにユーザ画像用のフィールドを追加
では、toDoListのコレクションを表示させます。
まずは、フィールドの追加を行います。フィールド名は、member_photoとしました。Data Typeは、ImagePathですね。
![](https://assets.st-note.com/img/1694030842317-TloSfXIjTS.png?width=1200)
データマネジャで画像パスを追加
続いて、データマネジャに移動します。
![](https://assets.st-note.com/img/1694031235525-eM9i9vFQYd.png?width=1200)
ここで先ほど追加したmember_photoカラムに画像のパスを追加します。
買い物は田中さん、引っ越しは八木さん、エアコンは山田さんが担当だったな…。対応関係に注意しつつ、画像をアップロードしますよ。
![](https://assets.st-note.com/img/1694031941144-TapG2Zv4pY.png?width=1200)
下図はドキュメントの内容を管理しているところです。赤枠のメニューをクリックして画像を追加します。
![](https://assets.st-note.com/img/1694031488701-IBRSkBr1Xa.png?width=1200)
はい、無事アップロードできました。データマネジャの一覧表示で、すべてのカラムを表示できないようで、イマイチ成功した確信が得られないのですが、まあ、いいでしょう。
やること詳細ページのウィジェットを準備
データの準備は終わったところで、UIビルダーに戻って「やること詳細」ページにユーザ画像を表示させます。
やること詳細ページは、今、下図のとおりです。CircleImageの位置が微妙ですし、もうちょっと、見た目を整えますか…。
![](https://assets.st-note.com/img/1694032083746-Yu5oWpvJPA.png)
はい、次のとおりとなりました。CircleImageをRowでラップして、テキストとへ入れるさせました。そのテキストは、静的な値として「担当者」を入力しておきました。
![](https://assets.st-note.com/img/1694032424823-SZXWHrJQGc.png)
ここら辺のレイアウトは、昔に比べると慣れてきたな~。
ページパラメータから画像フィールドを指定
ウィジェットは準備できたので、CircleImageのソースを指定しないといけないですね。
この詳細ページの値は、ページパラメータで受け取ったドキュメントからフィールドを取り出して指定したのでした。覚えてます?下図のとおりです。
![](https://assets.st-note.com/img/1694032691436-sBIAc1JQFm.png?width=1200)
ユーザ画像も同様のはずですね。ということで、CircleImageのパスを下図のように設定します。
![](https://assets.st-note.com/img/1694032860904-hZKAvcPcaT.png?width=1200)
よし、テストラン!
はい、では設定がうまくいったからテストランします~。
やることリストを開き、「引っ越し業者の見積もり」をクリック。八木さんの画像が表示されるか…。
![](https://assets.st-note.com/img/1694033109019-FVguyZefzW.png)
やりました~。表示できました、ユーザの画像!
![](https://assets.st-note.com/img/1694033192735-UT1g29dCZz.png)
はい、本日はここまで!今回は、toDoListコレクションに画像用のカラムを追加して、さらにそれを「やること詳細」ページに表示させました!
内心は、薄氷を踏む思いでしたよ。だいたいつまづきますからね…。データ回りの作業は…。
次回は、Document Referenceをページ間で送受信する作業に戻らねば!ということで、ユーザー情報を表示するページを作りましょう!
では~。
この記事が気に入ったらサポートをしてみませんか?