![見出し画像](https://assets.st-note.com/production/uploads/images/116586415/rectangle_large_type_2_76dad28e38db6883fcbe5b6a75985039.png?width=1200)
【FlutterFlow】総まとめ!ドキュメント・レファレンスの送受信はこれでOK
はい、こんにちは!前回記事からの続きです。FlutterFlowで、ページ間でドキュメント・レファレンスの受け渡しについてご紹介してきましたが、今回がそのシリーズの最後です~。
この記事でこのシリーズをまとめをやりましょう!ドキュメント・レファレンスをどう活用すればいいか、これを見れば、その概要が分かります!
なお、このシリーズは、この公式資料を参考にして作業しました。
ではいってみよう!
別のコレクションのドキュメントを表示したい
まずは、狙いを再確認します。
やることリストがあり、そのやることをリストをクリックすると、詳細ページが開きます。
その詳細ページにあるユーザ画像をクリックするとユーザの詳細ページが開きます。
![](https://assets.st-note.com/img/1695067534413-vaBn43OwnO.png?width=1200)
リストページと詳細ページに紐づいているコレクションは、toDoListというものです。一方、ユーザ詳細ページに紐づいているのは、Usersというコレクションです。
そう、「ドキュメント・レファレンスを送信することで、別のコレクションのドキュメントを表示させる。」これが狙いです。
手順の流れはこうだ
手順の詳細を見る前に、その全体像を確認しましょう。シリーズの記事の中でも何度も登場していますね。でも、バックエンド・クエリの設定を加筆しておりますので、ご留意ください。
![](https://assets.st-note.com/img/1695067397552-ToNbDdxhqJ.png?width=1200)
さきにデータを整備
最初のステップとして、コレクション側の準備作業が必要でした。
コレクションは、toDoListとUsersの2つを使い、それぞれ表示されるべき列のデータを登録しました。そして、肝心な作業として、ドキュメント・レファレンス(UsersのID)をtoDoListのコレクションに格納しましたね。
具体的には、UsersコレクションのUserIDをコピーして、toDoListのMember列に貼り付けました。地道な作業です。
![](https://assets.st-note.com/img/1695068125106-2K1p1LZSWh.png)
これでコレクション側の準備は準備できました。
1.送信側ページと受信側ページを作る
コレクションの準備が終わったら、送信側ページをUIビルダーで加工しました。担当者の写真を表示させるCircleImageを追加しました。
![](https://assets.st-note.com/img/1695068595659-njXkYBtKoZ.png)
加えて、受信側ページ、すなわち、ユーザ詳細ページを作りました。
![](https://assets.st-note.com/img/1695068789015-fQTdXVXkK3.png)
これで必要なウィジェットがそろいました。
ポイントとしては、「ウィジェットを先に揃えて、データの送受信の設定は後から行う」ことです。
2.ページパラメータを作る
続いて、受信側ページ(ユーザ詳細ページ)にパラメータを作りました。ドキュメントレファレンスを受け止める箱ですね。
![](https://assets.st-note.com/img/1695068954706-jIEyLyzEYJ.png)
3.ドキュメントレファレンスを送信
今度は送信側ページ(やること詳細)に移動します。このいったり来たりがややこしい。ユーザ画像にNavigate toアクションをつけると同時に、ドキュメントレファレンスをパスする設定をするのでした。
![](https://assets.st-note.com/img/1695069132904-uAiITfcWEA.png)
ポイントは、「ドキュメント・レファレンスを送るアクションがあるのではなく、Navigate toアクションの一部として設定する」というところです。
4.バックエンド・クエリを設定
ここが、ドキュメントを送信するときと異なるところです。
今度は、再びユーザ詳細ページに移動して、ページウィジェットにバックエンド・クエリを設定します。ようするに、「パラメータに届くのは、UserIDだけだから、バックエンド・クエリを設定しないと、それに紐づく値は使えないよ」ということです。
![](https://assets.st-note.com/img/1695069320937-IHsiajs05b.png)
5.フィールド値をウィジェットに紐づけ
そして最後に、ウィジェットの変数として、とUsersのフィールド値を紐づけて完成です!
![](https://assets.st-note.com/img/1695069546946-V4veNfuENN.png)
もうちょっとキレイにまとめたかったのですがお許しを!
ではまた会いましょう!
この記事が気に入ったらサポートをしてみませんか?