Flutter is an open-source mobile application development framework developed by Google. It is used to develop applications for Android and iOS, as well as being the primary method of creating applications for Google Fuchsia.

Supabase is an open source Firebase alternative. It provides a realtime database, authentication, and storage services for web, mobile and server applications. Supabase also provides a powerful GraphQL API for reading and writing data.

In this article, we&#x27;ll look at how to integrate Supabase into Flutter apps. We&#x27;ll cover how to install Supabase, handle authentication, read and write data to the database, and use the storage service.

![flutter supabase](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover11.jpg)
## What Is Supabase?
Supabase is an open source Firebase alternative that provides realtime databases, authentication, and storage services for web, mobile, and server applications. It is built on PostgreSQL and provides a GraphQL API for reading and writing data. Supabase also provides authentication services, including registration, login, and password reset.

## How To Install Supabase in Flutter?
To install Supabase in your Flutter app, you need to add the Supabase Flutter package to your pubspec.yaml file.

&#96;&#96;&#96;
dependencies:
  supabase: ^0.2.0
&#96;&#96;&#96;

Then, run &#96;flutter pub get&#96; to install the package.

## How to Handle Supabase Authentication in Flutter?
Supabase provides several authentication services, including registration, login, and password reset.

### Registration with Supabase in Flutter
To register a new user, you can use the &#96;register()&#96; method. This method takes in an email and password, and returns a &#96;User&#96; object containing the user&#x27;s ID and authentication token.

&#96;&#96;&#96;dart
import &#x27;package:supabase&#x2F;supabase.dart&#x27;;

Supabase supabase = Supabase.fromEnv(&#x27;&lt;your_project_url&gt;&#x27;, &#x27;&lt;your_project_key&gt;&#x27;);

Future&lt;User&gt; register(String email, String password) async {
  User user = await supabase.auth.register(email, password);
  return user;
}
&#96;&#96;&#96;

### Login with Supabase in Flutter
To log in an existing user, you can use the &#96;login()&#96; method. This method takes in an email and password, and returns a &#96;User&#96; object containing the user&#x27;s ID and authentication token.

&#96;&#96;&#96;dart
import &#x27;package:supabase&#x2F;supabase.dart&#x27;;

Supabase supabase = Supabase.fromEnv(&#x27;&lt;your_project_url&gt;&#x27;, &#x27;&lt;your_project_key&gt;&#x27;);

Future&lt;User&gt; login(String email, String password) async {
  User user = await supabase.auth.login(email, password);
  return user;
}
&#96;&#96;&#96;

## Supabase Database Integration in Flutter
Supabase provides a GraphQL API for reading and writing data to the database.

### Writing Data to Supabase in Flutter
To write data to the database, you can use the &#96;set()&#96; method. This method takes in a table name, an object containing the data to be written, and an optional set of options.

&#96;&#96;&#96;dart
import &#x27;package:supabase&#x2F;supabase.dart&#x27;;

Supabase supabase = Supabase.fromEnv(&#x27;&lt;your_project_url&gt;&#x27;, &#x27;&lt;your_project_key&gt;&#x27;);

Future&lt;void&gt; writeData(String tableName, Map&lt;String, dynamic&gt; data, {Map&lt;String, dynamic&gt; options}) async {
  await supabase.db.set(tableName, data, options: options);
}
&#96;&#96;&#96;

### Reading Single Data from Supabase in Flutter
To read a single record from the database, you can use the &#96;get()&#96; method. This method takes in a table name, an object containing the conditions of the query, and an optional set of options.

&#96;&#96;&#96;dart
import &#x27;package:supabase&#x2F;supabase.dart&#x27;;

Supabase supabase = Supabase.fromEnv(&#x27;&lt;your_project_url&gt;&#x27;, &#x27;&lt;your_project_key&gt;&#x27;);

Future&lt;Map&lt;String, dynamic&gt;&gt; readSingleData(String tableName, Map&lt;String, dynamic&gt; conditions, {Map&lt;String, dynamic&gt; options}) async {
  Map&lt;String, dynamic&gt; result = await supabase.db.get(tableName, conditions, options: options);
  return result;
}
&#96;&#96;&#96;

### Reading Lists from Supabase in Flutter
To read a list of records from the database, you can use the &#96;list()&#96; method. This method takes in a table name, an object containing the conditions of the query, and an optional set of options.

&#96;&#96;&#96;dart
import &#x27;package:supabase&#x2F;supabase.dart&#x27;;

Supabase supabase = Supabase.fromEnv(&#x27;&lt;your_project_url&gt;&#x27;, &#x27;&lt;your_project_key&gt;&#x27;);

Future&lt;List&lt;Map&lt;String, dynamic&gt;&gt;&gt; readListData(String tableName, Map&lt;String, dynamic&gt; conditions, {Map&lt;String, dynamic&gt; options}) async {
  List&lt;Map&lt;String, dynamic&gt;&gt; results = await supabase.db.list(tableName, conditions, options: options);
  return results;
}
&#96;&#96;&#96;

### Pagination with Supabase in Flutter
To paginate the results of a query, you can use the &#96;paginate()&#96; method. This method takes in a table name, an object containing the conditions of the query, and an optional set of options.

&#96;&#96;&#96;dart
import &#x27;package:supabase&#x2F;supabase.dart&#x27;;

Supabase supabase = Supabase.fromEnv(&#x27;&lt;your_project_url&gt;&#x27;, &#x27;&lt;your_project_key&gt;&#x27;);

Future&lt;PaginationResult&lt;Map&lt;String, dynamic&gt;&gt;&gt; paginateData(String tableName, Map&lt;String, dynamic&gt; conditions, {Map&lt;String, dynamic&gt; options}) async {
  PaginationResult&lt;Map&lt;String, dynamic&gt;&gt; results = await supabase.db.paginate(tableName, conditions, options: options);
  return results;
}
&#96;&#96;&#96;

### Sorting &amp; Filtering with Supabase in Flutter
To sort and filter the results of a query, you can use the &#96;sort()&#96; and &#96;filter()&#96; methods. These methods take in a table name, an object containing the conditions of the query, and an optional set of options.

&#96;&#96;&#96;dart
import &#x27;package:supabase&#x2F;supabase.dart&#x27;;

Supabase supabase = Supabase.fromEnv(&#x27;&lt;your_project_url&gt;&#x27;, &#x27;&lt;your_project_key&gt;&#x27;);

Future&lt;List&lt;Map&lt;String, dynamic&gt;&gt;&gt; sortFilterData(String tableName, Map&lt;String, dynamic&gt; conditions, {Map&lt;String, dynamic&gt; options}) async {
  List&lt;Map&lt;String, dynamic&gt;&gt; results = await supabase.db.sort(tableName, conditions, options: options);
  results = await supabase.db.filter(tableName, conditions, options: options);
  return results;
}
&#96;&#96;&#96;

## Supabase Storage Integration in Flutter
Supabase provides a Storage service for storing files in the cloud. To use the Storage service, you need to create a Storage bucket.

To upload a file to the Storage service, you can use the &#96;upload()&#96; method. This method takes in a file path, a Storage bucket name, and an optional set of options.

&#96;&#96;&#96;dart
import &#x27;package:supabase&#x2F;supabase.dart&#x27;;

Supabase supabase = Supabase.fromEnv(&#x27;&lt;your_project_url&gt;&#x27;, &#x27;&lt;your_project_key&gt;&#x27;);

Future&lt;String&gt; uploadFile(String filePath, String bucketName, {Map&lt;String, dynamic&gt; options}) async {
  String url = await supabase.storage.upload(filePath, bucketName, options: options);
  return url;
}
&#96;&#96;&#96;

To download a file from the Storage service, you can use the &#96;download()&#96; method. This method takes in a file path, a Storage bucket name, and an optional set of options.

&#96;&#96;&#96;dart
import &#x27;package:supabase&#x2F;supabase.dart&#x27;;

Supabase supabase = Supabase.fromEnv(&#x27;&lt;your_project_url&gt;&#x27;, &#x27;&lt;your_project_key&gt;&#x27;);

Future&lt;String&gt; downloadFile(String filePath, String bucketName, {Map&lt;String, dynamic&gt; options}) async {
  String url = await supabase.storage.download(filePath, bucketName, options: options);
  return url;
}
&#96;&#96;&#96;

## Conclusion
In this article, we looked at how to integrate Supabase into Flutter apps. We covered how to install Supabase, handle authentication, read and write data to the database, and use the storage service. We also included code snippets to demonstrate how to use each of these services.

How To Integrate Flutter Apps with Supabase

About

Legal

Products

Resources

Category: