自身の投稿にいいねをしたユーザーリストのアイコンを表示させる方法

いつもお世話になっております。

大変素人質問で恐縮ですが、下記内容についてご確認いただき回答いただけますと幸いです。

実現したい内容

  1. 講師のマイプロフィールがあり、プロフィール内に投稿リストが格納されており、そこから投稿詳細に遷移することができます。
  2. 投稿詳細内には「いいねトグル」、「いいね獲得数」、「いいねをした生徒のリストへの遷移する項目」を設置されています。
  3. 「いいねをした生徒のリストへの遷移する項目」から「いいねをしたユーザーリスト」を表示させたい。

課題

3.に記載した"投稿から「いいね」をしたユーザーリストを表示させる方法"がわからず困っています。

現状

投稿詳細画面から「いいねユーザーリスト」画面に遷移する際、投稿のIDをパラメータとして渡そうとしていますが、その設定方法がわからず、実装が進んでいません。設定方法をご教示いただけますと幸いです。

参照画像

投稿詳細

遷移後のリスト

具体的な、クエリ作成の方法については、

  • Postデータの取得:
    FlutterFlowのBackendクエリを使用して、現在のpostIdに基づいてPostドキュメントを取得します。
    クエリ条件: Post.id == postId

  • いいねユーザーIDリストの取得:
    取得したPostドキュメントから、Likeフィールド(ユーザーIDのリスト)を抽出します。

  • ユーザーデータの取得と表示
    取得したユーザーIDリストを使用して、対応するユーザードキュメントを取得します。

となります。

これが、FlutterFlowの挙動になると、

①Postデータの取得とユーザーの絞り込み

いいねを表示したいListViewに対して、

クエリの作成

LikesのDocumentでフィルターする

これだけで、基本はOKです、ただ、このままだと表示テキストはDocumentid だけになるので、以下②を行います。

②ユーザーデータの取得と表示

テキストウィジェットに対して、GetDocument Propertyで①のクエリをさらにUserDocumentを読み込み(例 Email)で表示する。

内容ほぼ同じですが、良ければ、こちらも参考にどうぞ。

ご確認いただきありがとうございます。
また、丁寧なご回答大変感謝いたします。

ただすみません、SQLについての知識がないため内容に追いつけておりません、、。

頂いた内容でリストを作成するに当たり、下記内容が必要かご回答いただけますでしょうか。

質問内容
1.UsersとPostのコレクションとは別にLikeのコレクションが必要ということでしょうか?

Postデータの取得:
FlutterFlowのBackendクエリを使用して、現在のpostIdに基づいてPostドキュメントを取得します。
クエリ条件: Post.id == postId

ここのPost IDの生成方法もまだわからなかったため、
参考のURLなどご教示いただけると助かります。

2.1の場合、Likeのコレクションの構成を教えていただきたいです。

まず、Likeのコレクションまでは、必要ありません。
想定ですが、Postの中に”フィールド”としてLike が Refelenceとして存在しているのではないかと思います。

クエリ条件: Post.id == postId

は、忘れていいですよ。挙動の内容を伝えたかっただけなので、

以下のListViewからDynamic Childrenを選択し、Listになれば、基本動作はできているはずです。

早々のご確認ありがとうございます!

Postコレクションにlikeのreference(user)を作成しているので、現状頂いた画像の様になっております。良かったです。

dynamic childrenなのですが、現在添付画像の状況になっていますがどのように選択していけばよろしいでしょうか。

大変お手数ですが、ご確認のほど何卒よろしくお願いいたします。

いいかんじですね。

Dynamic children 動的なクエリのことなので、
今回は、いわゆる Curret Post (前のページで表示されたPost情報)を選択することができます。

具体的には、
Page Prameterから、前のデータを受け取る必要があります。
例えば、私の場合には、RefPostというパラメーターを定義しているので、こここから情報を取得してます。

b19c715e85cd8961fe3d7d1b5fa6ca1b (1)

動画めっちゃわかりやすいです!
ありがとうございます!
とてもイメージつかめました!

ただparameterでpostRefを作成してそれを投稿詳細画面に渡していたのですが、
dynamic childrenで該当のものを選択した際に、available optionsが選択できない状態となっておりました、、。(※添付画像の状態)

この状態というのはうまくparameterが渡せていない状態ということでしょうか。

何度もお手数をおかけし申し訳ございませんが、
ご確認のほど、何卒よろしくお願いいたします。

そうですね。その手前ページからのPassが受け取れてないのだと思います。

その手間のページのナビゲートから、Document Typeでのパラメーターの受け渡しが必要です。

だいぶ返信が遅れてしまい、申し訳ございませんでした。
あれから現職が忙しくあまり時間が取れず、再開して再度同じところで二の足踏んでます、、、。

今dynamic childで自分の投稿から投稿にいいねをしたユーザーのリスト化させたいのですが、うまくいかず助けていただきたいです、、、。

翼さんにいただいたURLで試してるのですが、
Dynamic childでリスト化させるところまでできたのですが、
画像を引っ張ってくることができません。


適切な動線を教えていただけますでしょうか。

↑お忙しいところ恐れ入りますが、お手隙の際にご確認いただけると幸いです。

今日、ちょっと見れないですが、、週末確認しておきますね。

「いいね!」 1

かしこまりました。お手数ですがよろしくお願い致します!

前提として、PostデータをDynamic childでリスト化(UserRefを表示することはできる)ということですね。

で、やりたいことは、以下のようにPostにいいねした、Userデータのアイコン(Image)を表示したいということですね。

c029d4db52379dffc8d64b87fd45a5a3

であれば、おそらくUserCollectionを呼ぶということを忘れているだけだと思います。

やり方
①ListView以下のウィジェットでUserコレクションを呼ぶ


この時のポイントが、UserCollectionのVariavleにDynamicChidrenで指定した値を呼ぶ必要があります。

②Imageウィジェットでは、UserCollectionのImageを呼び出すだけ

もし、↑わかりにくければ、こちらが全体操作になります。

説明のポイント

Childで呼び出したものは、単に"Reference"(ユーザーデータの場所)を指しているだけなので、その参照先にある詳細な情報(例: ユーザーの写真、年齢、趣味など)は別途取得(クエリ)する必要があるということです。

例えば、PostデータでUserRefを取得した場合、これはそのユーザーが格納されている場所を示すだけです。つまり、UserRefだけではユーザーの詳細な情報(写真やプロフィール)はわかりません。

重要なステップ

そこで必要になるのが、UserRefを使って、該当するユーザーデータをクエリ(データベースから取得)して表示することです。

具体的には:

  1. UserRefを元に、ユーザーのドキュメント全体(写真、名前、その他のプロフィール情報)を読み込む。
  2. その後、クエリして取得したデータを表示するために、各ウィジェットにそのデータ(写真など)をバインドします。

このように、Reference(参照)だけではデータを表示できないので、クエリで必要な情報をページに取り込む必要があるということです。

f637a28d3b9e2849a7fc4037ddf23c5d

お忙しいところ本当にありがとうございます!

無事に解決させることができました、、!
途中UserCollectionのVariavleにDynamicChidrenで指定した値を呼べていませんでした。
非常に助かりました。ありがとございました。

おー、良かったです^^ 頑張ってくださいね。

「いいね!」 1