FlutterFlowでsupabaseを使おう

このブログでは、NoCodeツールのFlutterFlowとSupabaseを組み合わせて、動的なデータを持つアプリケーションの作成方法を詳しく解説します。

商品検索を実施する手順を説明していきたいと思います。このブログでは一旦商品をSupabaseから取得するところまでをカバーします。別ブログで検索方法を説明します。

はじめに

FlutterFlowとは

FlutterFlowは、フラッターをベースにしたドラッグアンドドロップのアプリ開発プラットフォームです。コーディングの知識が少ない人でも、直感的なUIで簡単にアプリを開発できます。

Supabaseとは

Supabaseは、オープンソースのFirebaseの代替として登場したBackend-as-a-Service（BaaS）プラットフォームです。データベース、認証、ストレージ、関数など、モバイルアプリやWebアプリ開発に必要な機能を統合的に提供しています。

FlutterFlowはデフォルトでFirebaseとの連携がスムーズに行えるように設計されていますが、Supabaseとの連携も可能です。Supabaseと連携することで、FlutterFlowアプリ開発において以下のようなメリットが得られます。

Supabaseのメリット

• オープンソース: Supabaseはオープンソースなので、コードを自由に閲覧したり、カスタマイズしたりできます。
• 柔軟なデータベース: SupabaseはPostgreSQLをベースとしたデータベースを採用しており、FirebaseのNoSQLデータベースとは異なり、リレーショナルデータベースの柔軟性を活かすことができます。
• コストパフォーマンス: SupabaseはFirebaseと比べて、無料プランの利用範囲が広く、有料プランも比較的安価です。
• セルフホスティング: Supabaseはセルフホスティングも可能です。これは、セキュリティやプライバシーを重視するアプリケーション開発に適しています。

と書いてはいますが、個人的には慣れ親しんだリレーショナルデータベースを使えるのがメリットかと思います。セルフホスティングとかはやりませんし、、、

FlutterFlowとsupabaseの接続方法

Supabaseでの基本設定

• Supabaseにアカウントを作成し、ログインします。
• ログイン後、新しいプロジェクトを作成してください。ここでは「SearchTest」というプロジェクトを作成しておきます。
• 設定→API（API Settings）でProject URLとProject API keyを確認してください。これらの値をFlutterFlowで設定します。

Supabaseでのテーブル作成

• Supabase上でテーブルを作成します。
• 商品検索用にproductというテーブルを作成します。左のサイトメニューにあるData Base→New tableで作成できます。
• このような感じで作成しています。
• Enable Row Level Securityは一旦OFFにしておいてください。データアクセスを許容するセキュリティ設定をする箇所ですが、ここにチェックをつけておくと今回の処理ではデータを取得できません。
• カラムにnameとdescriptionを追加しています。

• サンプルデータはサイドメニューのTable Editorから設定できます。適当にデータを追加してください。

FlutterFlow上でのsupabaseのEnable化

• 設定画面にあるsupabaseを開き、Enable SupabaseをONにします。

• API URL, Anon Key (API keyです）を設定し、Get Schemaをクリックしてください。
  そうすると、Supabaseと接続され、登録したテーブルが取得できているはずです。

画面の作成とSupabaseからのデータ取得

• 画面にListViewを配置します。
• ListViewに設定するデータはQuery Type “Supabase Query”としてください。そうすると、Supabaseで登録したテーブル”Product”の値をリストで取得できます。

• リスト内にテキストを2つ配置します。一つはProductのname,もう一つはdescriptionを表示するためのものです。以下のようなイメージになります。

テスト

• これでテストをするとSupabaseのテーブルに設定した値が取得できているはずです。

まとめ

本記事では、FlutterFlowでSupabaseからデータを取得する方法を解説しました。

Supabaseはオープンソースで柔軟性に優れたデータベースであり、FlutterFlowとの連携により、アプリ開発の選択肢が広がります。ぜひ、今回の記事を参考にして、FlutterFlowとSupabaseを組み合わせて、あなただけのアプリ開発に挑戦してみてください。

次はSupabaseを使ってキーワード検索を実施したいと思います。