今日はFlutterFlowで「いいね機能」を実装する方法を説明したいと思います。

下の方に動画での解説も載せてますのでその方が良い方はみてみてください。

FlutterFlowについてそもそも知りたい方はこちら

FlutterFlowはノーコード・ローコードでかなり複雑なネイティブアプリを作れる強力なアプリ開発ツールです。以下記事に概要を書いていますのでご参考まで。

ネイティブアプリを10倍速で作れるノーコードツールFlutterFlowとは？Adaloとの違いも合わせて解説

データベース側の設定

まずはデータベースの設定をしていきます。

コンテンツにいいねをしたいので、私の場合は「contents」というコレクションに「likes」という項目を追加しました。

likesの中に複数のユーザーがいいねするイメージなので、「Is List？」をONにして、TypeをDocument ReferenceにしてUsersにします。

これでデータベース側の準備はOKです。

toggleボタンを設置する

次は「いいね」機能のUIです。以下のように「いいね」するためのハートアイコンを追加したいのですが、こちらはtoggleボタンとして追加します。

見た目はOn IconとOff Iconと書いてるところから変更できるので、それぞれ白抜きのハートの黒塗りのハートを選びましょう。色もお好みで設定できます。

toggleボタンの設定

次に、「いいね」のtoggleボタンのvalueの設定をしましょう。

contentsDocumentのlikesしているユーザーのリストの中に自分が含まれてるかどうかでtoggleボタンのON/OFFを制御します。以下のようになります。

まずToggle Valueからcontents Documentのlikesを選びます。

次に、List Contains Itemを選び、Authenticated UserのUser Referenceを選択します。

Confirmを押して完了です。

これだけで「いいね機能」が実装できました！

「いいね」機能をYoutube動画で確認したい方はこちら

FlutterFlowは複雑なため、動画で見た方が早いことも多いため、動画にもまとめてみました。

この記事の内容は上記の動画で詳しく解説しています。興味のある方はどうぞ。

アプリ・Webサービスの開発の無料相談はこちら

Adalo、bubble、flutterflow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。

弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。

また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。

アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。