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

2023年9月19日 12:00

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

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

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

ではいってみよう！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ではまた会いましょう！