こんにちは、NoCodeCampのツバサです。
今回は、Flutterflow×Supabaseの接続方法を投稿していきます。
Supabaseって何?って人は、バックエンドに必要な機能を構築できるSupabaseで説明してますので一読下さい。
今回やりたいこと
SupabaseのTableのデータを以下のようにFluttreflowへ登録させていきます。
![](https://tsubasa.tech/wp-content/uploads/2023/01/image-4-1024x326.png)
![](https://tsubasa.tech/wp-content/uploads/2023/01/image-2-888x1024.png)
事前知識/目的(データセット)
SupabaseというのはBaaSとは「Banking as a Service」 というサービスで、データベースの機能です。
手順としては①Supabaseへデータを登録 ②Fluttreflowへ接続し反映させるとなります。
1.Supabaseへデータ登録する
Supabaseへアクセスし、アカウントを作成しましょう。
アカウントが作成できたら、Tableのクリエイトをします
![](https://tsubasa.tech/wp-content/uploads/2023/01/image-3-1024x556.png)
次にサンプルとしてのデータを入れていきましょう。今回はnameとDateを登録しました
![](https://tsubasa.tech/wp-content/uploads/2023/01/image-5-1024x326.png)
nameの追加
![](https://tsubasa.tech/wp-content/uploads/2023/01/image-6-935x1024.png)
注意
ここで、RLSのポリシーも作成しておきましょう。RLSポリシーが作成されてないとFluttreflow上でのデータ表示ができなくなります。
![](https://tsubasa.tech/wp-content/uploads/2023/01/image-7-1024x324.png)
*なぜ表示されないのか、エラーが出ないので、想定ですが、PostgreSQLのRLSはデフォルト拒否設定になっているためだと思われます。(通常、ポリシーを指定し忘れると、アクセスを拒否されてしまいます)
(参考)PostgreSQLのRow Level Securityでポリシーを設定し忘れると何が起きるのか
NewPolicyから、Get started quicklyで作成ができます。
![](https://tsubasa.tech/wp-content/uploads/2023/01/image-8-1024x602.png)
ここまででSupabaseの設定は完了です。
Flutterflowの設定①(接続)
Fluttreflowの設定はとても簡単です。
まず、Fluttreflowの設定画面から、IntegrationのSupabaseを選択し
API URLとAnonkeyを入力すれば完了です。
![](https://tsubasa.tech/wp-content/uploads/2023/01/image-9-1024x542.png)
APIURLと、AnonKeyは、それぞれSpabaseの設定画面から取得できます。
![](https://tsubasa.tech/wp-content/uploads/2023/01/image-10-1024x570.png)
Flutterflowの設定②(設定)
Supabaseとの接続が完了したら、Fluttreflowのエディターに行き、BackendQueryを選択するとSupabaseQueryが選択できるようになってます。
![](https://tsubasa.tech/wp-content/uploads/2023/01/image-11-1024x736.png)
SouceからSupabaseのTable名(例 Fluttreflow-Table)を選択し、nameを選択します。
![](https://tsubasa.tech/wp-content/uploads/2023/01/image-12-1024x657.png)
プレビューで確認して、データが表示できれば完成です。
![](https://tsubasa.tech/wp-content/uploads/2023/01/image-13-888x1024.png)
参考動画
FlutterFlow ×Supabase Setup(英語)