tsubasatwi( つばさ） 
NoCodeFAQ のより頂きました回答です
今回やること
FlutterFlowを使用して、特定の投稿に「いいね」をしたユーザーの名前を表示する機能を実装します。これにより、ユーザーは誰が投稿を気に入ったかを簡単に確認できるようにしてます。
今回Post→PostDetailへの遷移はできるものとして説明をしてます。
この辺りは、公式ドキュメント PassingDataを見て下さい
データの準備
- 既存の「Post」コレクションと「Like」コレクションがあることを確認します。
- 「User」コレクションに
user_nameフィールドがあることを確認します。
今回は、以下のデータを使ってます。
*Likeの数字がカウントされる方法については、aanyaの動画などを参考にしてください。基本はToggle動作を行うだけです。
PageDetailのクエリの作成
まず、少し寄り道して、Flutterのクエリの動作について確認しておきます。
今回の動作については、以下の流れになります。
- 「いいねしたユーザー」のListViewに対して新しいクエリ（likelist）を作成します。
- フィルター条件として
post_idが現在表示中の投稿IDと一致するものを選択します。
ユーザー情報の取得
- 上記のクエリに「User」コレクションとのjoinを追加します。
- join条件は
Like.user_id = User.idとします。 - 取得するフィールドとして
User.user_nameを選択します。
以上です。つまり、
まずはPostドキュメントの一覧から、
現行のCurrentDataのDocumentidと同じものをフィルタリングし、そのフィルタリングされたDocumentからUserを表示している。という流れになります。
では、FlutterFlowでやっていきましょう。
これで、いいねしたUserのドキュメントIDのみ取得することができました。
このまま表示してもIDだけになるので、ここからテキストウィジェットに対してさらにクエリをさせていきます。
これで、完成です。
まとめ
簡単そうですが、クエリの構成がわからないと、ちょっと苦戦しそうな、内容でしたね。クエリを2回使うのがSQLで慣れているとちょっとイメージつきにくいかもしれません。ここからさらに、この基本的な実装を拡張して、ユーザープロフィールへのリンクを追加したり、いいねの時間順に表示したりするなど、より高度な機能を追加することも可能です。
