【FlutterFlow】コンポーネントを使ったコメント機能を実装しよう

SNSアプリなどでのコメント機能の実装方法を解説します。Xのコメント投稿機能に似た感じで実装したいと思います。是非参考にしてください。

ゴールイメージ

以下の動画のようなポスト機能を実施したいと思います。今回はシンプルにテキストだけポストします。
画像などのポスト機能も同様のやり方で実装できるので是非トライしてみてください。

前提

• 今回はSNSアプリの投稿に対してコメントすることをイメージして実装します。
• コメント投稿機能にフォーカスしますのでコメント対象になるポストの一覧、ポストの詳細画面は作成できている前提とします。
• ちなみにポストのコレクションは以下のようなドキュメントが登録されています。

実装方法

コメント用のコレクションの作成

• コメントを格納するためのコレクションを作成します。
• postは上の前提で記載したpostsのレファレンスを設定しています。

コメント投稿用画面の作成

• 画面は以下のようになります。画面上部には投稿者や投稿内容（文章）、画像などが表示されていますが、そこは本内容のメインではないので説明は割愛します。（左側がビルダー画面、右が実行画面です）
• 画面下部のコメント部分（写真以下）について説明を行います。

• Page Parametersには以下のようにpostsRefを設定します。前のページのポストの一覧画面から対象となるポストをPage Parametersとして受け取ります。

• コメント部分はListViewの中にコメントの内容を格納するイメージになります。一つ一つ説明をしていきます。

大枠のListViewのデータは以下の図のようにBackend Queryを用いて該当のポストに関連するコメントを取得しています。

• ListViewの中にあるRowにはコメントをしたユーザーの情報を設定しています。理由はRowの中にコメントしたユーザーのプロフィール画像や名前を表示するため、UserのReferenceを格納するようにしています。

• 投稿ユーザの画像、投稿ユーザ名はここで設定したUser Referenceを使って画像と名前を取得します。以下のイメージです。

• メインとなるコメントはcomments Documentからcommentのpropertiesを取得します。Listのデータとしてcommentsを取得していますのでそこから各リストのコメント内容の取得が可能になっているイメージです。（わかりにくくてすみません！）

• 投稿時間も表示できるようにしておきます。ここでは相対時間（1日前、1時間前など）として表示できるようにします。
  設定は先ほどのコメントとほぼ同じになります。ListViewのデータとして設定したcommentsからcommented_atを取得して利用します。
  DateTime Format Optionsでrelativeを選択することで相対時間として表示が可能となります。

コメント投稿用のコンポーネント（BottomSheet）を追加

• コンポーネントのテンプレートからそれらしいコンポーネントを選びます。ここではCard19 – CommentBoxを使っています。

• 細かいですが、選んだCommentBoxから画像写真を削除しています。以下のようなコンポーネントにしています。

• ここではコメントした内容を対象のpostに紐づく形で登録する必要があるため、postの情報をComponent Parametersで受け取る設定を行います。これで元ページ（ポストの詳細ページ）から対象のPostを受け取れます。

• Postボタンを押下した際にデータベースにコメントを格納します。アクションとしてはデータベースにコメントを格納した後に、前ページ（ポストの詳細ページ）に戻るような処理を入れておきます。
  全体の流れは以下の2ステップです。

• 1番目のステップでは以下のような形でコメントされた内容をcommentsコレクションに格納しています。postは上記の通り、前ページ（ポストの詳細画面）から受け取ったpostを設定します。
  commentはwidget stateから入力されたコメントを設定します。

• データベースへの登録が完了すると、Navigate Backを設定します。これを設定することでコンポーネントが非表示となります。

コメント投稿ボタンを配置

• コメント投稿用のボタンを配置します。正確にはコメントを投稿するためのコンポーネントを呼び出すボタンになります。

• 本ボタンを押すと、コメント投稿用のコンポーネントが表示されるようにします。
  設定するアクションはBottom Sheetで先ほど登録したコメント登録用のコンポーネントを呼び出します。私の場合はCommentBoxという名前にしています。

はい、これで設定は完了となります。

（おまけ）コメント数の表示

• コメント数を表示する方法もおまけで載せておきます。以下の画像で「1 Comments」と表示されている箇所です。

• 数字部分のデータにQuery Collectionでcommentsのコレクションから該当のポストに関連するコメントを取得します。
• そして、数字（コメント数）を表示したいのでプロパティにはNumber of Itemsを設定します。

これで該当ポストへのコメント数も取得できるようになりました。

まとめ

長文でしかもかなりわかりにくかったかと思いますが読んでいただきありがとうございます。

結局のところ、ポイントはコンポーネントへ対象となるポストのリファレンス情報を渡し、コメント投稿用のコンポーネント側では受け取ったポストの情報と入力されたコメント情報をコレクションに格納する、ということです。

動作自体はとてもシンプルで簡単かと思いますので是非トライしてみてください。