How To Integrate Flutter Apps with Supabase

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'll look at how to integrate Supabase into Flutter apps. We'll cover how to install Supabase, handle authentication, read and write data to the database, and use the storage service.

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.

dependencies:
  supabase: ^0.2.0

Then, run flutter pub get 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 register() method. This method takes in an email and password, and returns a User object containing the user's ID and authentication token.

import 'package:supabase/supabase.dart';

Supabase supabase = Supabase.fromEnv('<your_project_url>', '<your_project_key>');

Future<User> register(String email, String password) async {
  User user = await supabase.auth.register(email, password);
  return user;
}

Login with Supabase in Flutter

To log in an existing user, you can use the login() method. This method takes in an email and password, and returns a User object containing the user's ID and authentication token.

import 'package:supabase/supabase.dart';

Supabase supabase = Supabase.fromEnv('<your_project_url>', '<your_project_key>');

Future<User> login(String email, String password) async {
  User user = await supabase.auth.login(email, password);
  return user;
}

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 set() method. This method takes in a table name, an object containing the data to be written, and an optional set of options.

import 'package:supabase/supabase.dart';

Supabase supabase = Supabase.fromEnv('<your_project_url>', '<your_project_key>');

Future<void> writeData(String tableName, Map<String, dynamic> data, {Map<String, dynamic> options}) async {
  await supabase.db.set(tableName, data, options: options);
}

Reading Single Data from Supabase in Flutter

To read a single record from the database, you can use the get() method. This method takes in a table name, an object containing the conditions of the query, and an optional set of options.

import 'package:supabase/supabase.dart';

Supabase supabase = Supabase.fromEnv('<your_project_url>', '<your_project_key>');

Future<Map<String, dynamic>> readSingleData(String tableName, Map<String, dynamic> conditions, {Map<String, dynamic> options}) async {
  Map<String, dynamic> result = await supabase.db.get(tableName, conditions, options: options);
  return result;
}

Reading Lists from Supabase in Flutter

To read a list of records from the database, you can use the list() method. This method takes in a table name, an object containing the conditions of the query, and an optional set of options.

import 'package:supabase/supabase.dart';

Supabase supabase = Supabase.fromEnv('<your_project_url>', '<your_project_key>');

Future<List<Map<String, dynamic>>> readListData(String tableName, Map<String, dynamic> conditions, {Map<String, dynamic> options}) async {
  List<Map<String, dynamic>> results = await supabase.db.list(tableName, conditions, options: options);
  return results;
}

Pagination with Supabase in Flutter

To paginate the results of a query, you can use the paginate() method. This method takes in a table name, an object containing the conditions of the query, and an optional set of options.

import 'package:supabase/supabase.dart';

Supabase supabase = Supabase.fromEnv('<your_project_url>', '<your_project_key>');

Future<PaginationResult<Map<String, dynamic>>> paginateData(String tableName, Map<String, dynamic> conditions, {Map<String, dynamic> options}) async {
  PaginationResult<Map<String, dynamic>> results = await supabase.db.paginate(tableName, conditions, options: options);
  return results;
}

Sorting & Filtering with Supabase in Flutter

To sort and filter the results of a query, you can use the sort() and filter() methods. These methods take in a table name, an object containing the conditions of the query, and an optional set of options.

import 'package:supabase/supabase.dart';

Supabase supabase = Supabase.fromEnv('<your_project_url>', '<your_project_key>');

Future<List<Map<String, dynamic>>> sortFilterData(String tableName, Map<String, dynamic> conditions, {Map<String, dynamic> options}) async {
  List<Map<String, dynamic>> results = await supabase.db.sort(tableName, conditions, options: options);
  results = await supabase.db.filter(tableName, conditions, options: options);
  return results;
}

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 upload() method. This method takes in a file path, a Storage bucket name, and an optional set of options.

import 'package:supabase/supabase.dart';

Supabase supabase = Supabase.fromEnv('<your_project_url>', '<your_project_key>');

Future<String> uploadFile(String filePath, String bucketName, {Map<String, dynamic> options}) async {
  String url = await supabase.storage.upload(filePath, bucketName, options: options);
  return url;
}

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

import 'package:supabase/supabase.dart';

Supabase supabase = Supabase.fromEnv('<your_project_url>', '<your_project_key>');

Future<String> downloadFile(String filePath, String bucketName, {Map<String, dynamic> options}) async {
  String url = await supabase.storage.download(filePath, bucketName, options: options);
  return url;
}

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.