FlutterFlowでのフォロー機能の実装方法をまとめておきます。中間テーブルの理解が難しいかもと思ってますが、画像多めで解説していきます。
とりあえず、完成形はこんな感じ👇
前提
- ベースのUIは既にできてるものとして進めます。フォローとフォロー解除ボタンの二つをStackで重ねておきましょう。
- User詳細ページには、任意のUserのDoc ReferenceがPage Parameterとして渡されているものとします。
Firestore データベース設計
まずは、データベースの設計をしていきます。
フォロー機能では、”〇〇さんが□□さんをフォローしてるorしてない”という情報をデータベースの中に記述していく必要があります。今回は、UserとUserのフォロー関係を記述するための中間テーブルを作成し、そこにデータを記述していきます。
フォロー機能の他にもテーブル同士の多対多の関係性について記述する場合には同様に中間テーブルを作成するのが良いでしょう。
というわけで、左側パネルからFirestoreのタブを開いて、friendsコレクションを作成し、
follower : フォローしたユーザー
followee : フォローされたユーザー
をフィールドにそれぞれ追加します。いずれもデータタイプはDocument Reference > Usersにしてください。
※ Is List?にチェックをつける必要はありません。ご注意を。
followerとfolloweeはどちらもデータタイプがDoc Reference (Users)で、かつ名前も似ちゃうので、どっちがどっちか分からなくならないようお気をつけください。
このテーブルにおいて、follower = ”〇〇さん” かつ followee = “□□さん”となるようなレコードが存在するorしないによって、〇〇さんが□□さんをフォローしてるorしてないという状態を定義します。
や、ややこしい。。
クエリの設定
次は、特定のfriendsレコードの有無によって、ボタンの表示(Visibility)やアクションの切り替えを行います。その前に、ボタンが”特定のfriendsレコード”にアクセスできるように予めクエリを設定しておく必要があります。
今回はフォロー/フォロー解除ボタンの親要素にあたるStackに対して、クエリを設定します。Stackをクリックして、右側パネルのBackend Queryタブを開きます。
クエリ設定手順
-
Query TypeはQuery Collectionを選択。 -
Collectionはfriendsを選択。 - その下の
Query TypeはList of DocumentsをSingle Documentに変更。 -
Hide Widget If No Matchをオフに変更。 - フィルター(follower = Authenticated User > User Reference)を追加。
- フィルター(followee = users Document > Reference)を追加。
一層ややこしい感じになってきましたね。5.と6.で設定したフィルターによって、friendsレコードは一つだけ取得されることになります。このレコードがあればフォローしてる、なければフォローしてないという形でフォロー状態を定義します。
Visibilityで表示切り替え
フォロー状態によって、フォローボタンとフォロー解除ボタンの表示の切り替えを行います。
それぞれのボタンのPropertiesタブを開いて、Conditional Visibilityをオンにします。クエリの設定が正しく出来ていれば、friends Documentが表示されると思うので、friends Document > Document Existsを選択します。
フォローボタンでは、Apply Opposite Statementをオンにしてください。
フォロー解除ボタンでは、Apply Opposite Statementをオフのままにしてください。
アクションを追加
フォローボタンとフォロー解除ボタンにそれぞれアクションを追加します。それぞれのボタンのActionsタブを開いて、+ Add Actionをクリックします。
フォローボタンでは、friendsレコードを作成します。Database > Create Documentと選択し、Collectionでfriendsを選択してください。+ Add Fieldから、followerとfolloweeを追加し、
followerには、Authenticated User > User Referenceを
followeeには、users Document > Referenceをそれぞれ設定してください。
フォロー解除ボタンでは、friendsレコードを削除します。Database > Delete Documentと選択し、friends Document > Referenceを選択してください。
これで完成です！！Runして動作確認してみてください。
まとめ
手順は以下
- データベース設計
- クエリの設定
- Visibilityで表示切り替え
- アクションを追加
難しいのは、やはり中間テーブルの理解と、クエリの設定で出てきたフィルターの辺りかなと。何度か見直してもらいつつ、やってみていただければと思います。
そもそもの中間テーブルの概念についてもう少し、という方はググるとたくさん出てくるので、参考にしてください。👇一例です。
というわけで、ここまでありがとうございました。一人でも多くの方の参考になれば幸いです。ご意見・ご質問あればコメントからよろしくお願いします。😊
おまけ
中間テーブルを作る方法を試す前に、UserテーブルにfollowerとfolloweeのDoc Referenceをリスト形式でプロパティとして持たせる方法を👇こちらの記事を参考にやってみたんですが、
以下のように一度ページ開き直さないと、Visibilityが反映されない状態になってしまいました。こっちの方法でボタンの表示の切り替えを可能にするやり方をご存知の方は教えてください🙇♂️