FlutterFlowでチェックボックス内容をデータベースに登録する方法（※Supabase利用）

FlutterFlowとSupabaseを連携させて、チェックボックスの値を使ってデータベースを更新する方法について解説します。

この記事では、チェックボックスにチェックを入れた際に、Supabaseに接続し、特定のデータベーステーブル（productテーブル）のフラグ（isChecked）を更新する手順を説明します。

前提条件

• FlutterFlowプロジェクトがすでに設定されていること
• Supabaseとの接続が完了していること
• productテーブルに以下のカラムがあること
  • id: bigint
  • name: text
  • isChecked: boolean（チェックボックスの状態を保持）

ステップ1: データベースの作成

1. Supabaseでproductテーブルを作成する
   • Supabaseプロジェクトのダッシュボードにアクセスし、新しいテーブルを作成します。
   • テーブル名をproductに設定し、以下のカラムを追加します。
     • id: bigint（プライマリーキー）
     • name: text（商品の名前）
     • isChecked: boolean（チェックボックスの状態を保持）
   • これにより、各商品のチェック状態を管理できるテーブルが作成されます。
   • 例えば以下のようなテーブルになります。

ステップ2: ページステートの作成

• ページステートを設定する
  • FlutterFlowの「ページステート」を利用して、チェックボックスの状態を管理します。
  • checkedProdとnonCheckedProdというリストタイプのステートを作成します。
    • checkedProd: チェックが入った商品を保持するリスト
    • nonCheckedProd: チェックが入っていない商品を保持するリスト
  • このページステートを用いることで、複数の商品に対するチェック状態をリアルタイムで管理し、ユーザーインターフェースに反映させます。
• 以下のようなイメージです。

ステップ3: FlutterFlowでチェックボックスを追加

1. ListViewを追加
   • FlutterFlowのUIで商品一覧を表示するためのListViewを設置します。

1. チェックボックスウィジェットを追加
   • FlutterFlowのUIで、リスト表示する各アイテムにチェックボックスを追加します。このチェックボックスは、productテーブルの各アイテムに対応しています。

ステップ4: ページロード時にページステートに値を設定

• ページロード時に作成したページステートに値を設定します。作成したcheckedProd, nonCheckedProdのそれぞれに値を設定します。
• 値はSupabaseからBackend Call “Query Rows”で取得した値を設定します。データベースのisCheckedのTrue, FalseをFiltersに指定し、取得したproductの値をcheckjedProd, nonCheckedProdに設定しています。

ステップ5: ページステートの更新

• チェックボックスの状態が変更された際に、ページの状態を更新する必要があります。
• 添付の画像のように、On Toggled OnまたはOn Toggled Offアクションにて、該当するproductの行をリストから追加または削除します。
  • checkedProdリストから項目を追加または削除することで、チェック状態を管理します。
  • これにより、複数のチェックボックスが一度に選択された場合の状態を反映させます。

＜チェックボックスにチェックされたとき＞

＜チェックボックスからチェックを外したとき＞

ステップ6: ボタンでデータベースを更新

• チェックボックスで選択された内容をデータベースに保存するために「update」ボタンを用意します。
• ボタンのOn Tapアクションで以下の処理を実行します。
  1. Backend Call (Update Row(s))
     • productテーブルのisCheckedフィールドを更新します。
     • Matching Rowsには、更新したい行の条件（idなど）を設定します。
     • 各productのisCheckedフィールドにチェックボックスの現在の状態を反映させます。
  2. Snack Barの表示
     • 更新が完了したことをユーザーに通知するために、Snack Barを表示します。
  3. Refresh Database Request
     • データベースのリクエストをリフレッシュして、UIに反映させます。

これでチェックを付けた値、チェックを外した値がデータベースに反映されます。

注意点

• チェックボックスの状態を更新する際、非同期処理になるため、データベースが更新される前にUIが変更されることを避けるために、Refresh Database Requestを行うようにします。

まとめ

以上の手順で、FlutterFlowを使ってチェックボックスの状態に応じてSupabaseのデータを更新する処理を実装することができます。このアプローチを活用すれば、チェックリスト形式のアイテムを簡単に管理することが可能です。

今後、さらに効率的なデータ更新処理や、異なるデータベースの操作方法についても詳しく解説していきますので、ぜひお楽しみにしてください。