Use Supabase with Flutter
Learn how to create a Supabase project, add some sample data to your database, and query the data from a Flutter app.
Create a Supabase project
Go to database.new and create a new Supabase project.
When your project is up and running, go to the Table Editor, create a new table and insert some data.
Alternatively, you can run the following snippet in your project's SQL Editor. This will create a countries
table with some sample data.
Make the data in your table publicly readable by adding an RLS policy:
Create a Flutter app
Create a Flutter app using the flutter create
command. You can skip this step if you already have a working app.
Install the Supabase client library
The fastest way to get started is to use the supabase_flutter
client library which provides a convenient interface for working with Supabase from a Flutter app.
Open the pubspec.yaml
file inside your Flutter app and add supabase_flutter
as a dependency.
Initialize the Supabase client
Open lib/main.dart
and edit the main function to initialize Supabase using your project URL and public API (anon) key:
Project URL
Anon key
Query data from the app
Use a FutureBuilder
to fetch the data when the home page loads and display the query result in a ListView
.
Replace the default MyApp
and MyHomePage
classes with the following code.
Start the app
Run your app on a platform of your choosing! By default an app should launch in your web browser.
Note that supabase_flutter
is compatible with web, iOS, Android, macOS, and Windows apps.
Running the app on MacOS requires additional configuration to set the entitlements.
Going to production
Android
In production, your Android app needs explicit permission to use the internet connection on the user's device which is required to communicate with Supabase APIs.
To do this, add the following line to the android/app/src/main/AndroidManifest.xml
file.
_10<manifest xmlns:android="http://schemas.android.com/apk/res/android">_10 <!-- Required to fetch data from the internet. -->_10 <uses-permission android:name="android.permission.INTERNET" />_10 <!-- ... -->_10</manifest>