【FlutterFlow】総まとめ！ドキュメント・レファレンスの送受信はこれでOK

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

この記事でこのシリーズをまとめをやりましょう！ドキュメント・レファレンスをどう活用すればいいか、これを見れば、その概要が分かります！

なお、このシリーズは、この公式資料を参考にして作業しました。

ではいってみよう！

別のコレクションのドキュメントを表示したい

まずは、狙いを再確認します。

• やることリストがあり、そのやることをリストをクリックすると、詳細ページが開きます。

• その詳細ページにあるユーザ画像をクリックするとユーザの詳細ページが開きます。

リストページと詳細ページに紐づいているコレクションは、toDoListというものです。一方、ユーザ詳細ページに紐づいているのは、Usersというコレクションです。

そう、「ドキュメント・レファレンスを送信することで、別のコレクションのドキュメントを表示させる。」これが狙いです。

手順の流れはこうだ

手順の詳細を見る前に、その全体像を確認しましょう。シリーズの記事の中でも何度も登場していますね。でも、バックエンド・クエリの設定を加筆しておりますので、ご留意ください。

さきにデータを整備

最初のステップとして、コレクション側の準備作業が必要でした。

コレクションは、toDoListとUsersの2つを使い、それぞれ表示されるべき列のデータを登録しました。そして、肝心な作業として、ドキュメント・レファレンス（UsersのID）をtoDoListのコレクションに格納しましたね。

具体的には、UsersコレクションのUserIDをコピーして、toDoListのMember列に貼り付けました。地道な作業です。

これでコレクション側の準備は準備できました。

１．送信側ページと受信側ページを作る

コレクションの準備が終わったら、送信側ページをUIビルダーで加工しました。担当者の写真を表示させるCircleImageを追加しました。

加えて、受信側ページ、すなわち、ユーザ詳細ページを作りました。

これで必要なウィジェットがそろいました。

ポイントとしては、「ウィジェットを先に揃えて、データの送受信の設定は後から行う」ことです。

２．ページパラメータを作る

続いて、受信側ページ（ユーザ詳細ページ）にパラメータを作りました。ドキュメントレファレンスを受け止める箱ですね。

３．ドキュメントレファレンスを送信

今度は送信側ページ（やること詳細）に移動します。このいったり来たりがややこしい。ユーザ画像にNavigate toアクションをつけると同時に、ドキュメントレファレンスをパスする設定をするのでした。

ポイントは、「ドキュメント・レファレンスを送るアクションがあるのではなく、Navigate toアクションの一部として設定する」というところです。

４．バックエンド・クエリを設定

ここが、ドキュメントを送信するときと異なるところです。

今度は、再びユーザ詳細ページに移動して、ページウィジェットにバックエンド・クエリを設定します。ようするに、「パラメータに届くのは、UserIDだけだから、バックエンド・クエリを設定しないと、それに紐づく値は使えないよ」ということです。

５．フィールド値をウィジェットに紐づけ

そして最後に、ウィジェットの変数として、とUsersのフィールド値を紐づけて完成です！

もうちょっとキレイにまとめたかったのですがお許しを！

ではまた会いましょう！