What is Flutter?

Flutter is an open-source mobile application development framework developed by Google. Its strength lies in the ability to build high-quality native mobile apps for both iOS and Android with a single codebase.

What is Supabase?

Supabase is an open-source Backend as a Service (BaaS) that provides tools and services for building and managing the backend of mobile and web applications. It can be seen as an alternative to the well-known Firebase. The most significant difference between Supabase and Firebase is its use of a relational database (PostgreSQL).

I'm not very knowledgeable about NoSQL, but I've often heard that as Firebase, or Firestore, scales, it can become challenging. If you wanted to use an RDB and didn't want to spend too much time setting up an API application with something like Spring Boot and deploying it to a Platform as a Service (PaaS), it seemed like there wasn't a straightforward solution. When I was researching this, I came across Supabase.

As indicated in the pricing section, they offer a free plan.

What is PowerSync?

PowerSync is a cloud service that synchronizes the backend SQL database with an on-device database embedded in the SDK. It's an understanding of a Backend as a Service (BaaS) that allows for the quick development of applications with an Offline-First architecture.

While contemplating the design of a certain app, I was concerned about latency when making heavy queries by hitting the backend API every time. I wondered if Supabase offered a feature like Offline First, similar to Firebase (Firestore). It's possible to implement it on your own with a well-designed development approach, but it can be quite costly. During my research, I came across PowerSync. It's still in beta, but from what I gathered on their official website, they have an SDK for Flutter that looks promising.

As indicated in the pricing section, they also offer a free plan. As of October 2023, it's still in beta, so everything appears to be free for now."

Create a Todo List

Understanding the basic CRUD operations helps you grasp the versatility of a technology, so I decided to create a beloved Todo List. To my surprise, PowerSync had already prepared a sample project for this:

https://github.com/journeyapps/powersync-supabase-flutter-todolist-demo

Clone the sample project

So, I'd like to try running the sample.

$ git clone git@github.com:journeyapps/powersync-supabase-flutter-todolist-demo.git
$ cd powersync-supabase-flutter-todolist-demo
$ flutter pub get
$ flutter run

However, I encountered the following error:

Error: CocoaPods's specs repository is too out-of-date to satisfy dependencies.
To update the CocoaPods specs, run:
  pod repo update

I was able to launch it by running the following commands, as per the reference:

https://stackoverflow.com/questions/64443888/flutter-cocoapodss-specs-repository-is-too-out-of-date-to-satisfy-dependencies

$ cd ios
$ rm Podfile.lock
$ pod install --repo-update
$ flutter clean

Create a Supabase Project

Follow the flow to create a project in Supabase. Since it's straightforward, I'll skip the details.

Once you've created the project, execute the 'database.sql' as mentioned in the README using Supabase's SQL editor.

When you check the Table Editor, you'll see that two tables have been created.

Create a PowerSync Instance and Integrate with Supabase

Details are documented here. First, create an account following the steps from PowerSync. Next, create an instance from 'Create new Instance.'

Then, in the 'Edit Instance' dialog under the 'Credentials' tab, enable 'Use Supabase Auth.'

Select 'SupaBase Project Settings → Database.' Copy the URI below 'Connection String.'

Return to the 'Edit Instance' screen in PowerSync, open the 'Connections' tab, and paste the URI.

Enter the password you provided when creating your Supabase account, then execute 'Test Connections.'

Once you've confirmed 'Connection Success!' is displayed, click 'Save.'

Deploy Sync Rules

In the README, replace the contents of 'sync-rules.yaml' in PowerSync's dashboard with the 'sync-rules.yaml' mentioned.

Next, click 'Deploy sync rules.'

Modify 'lib/app_config.dart'

Modify 'lib/app_config.dart' with the following information:

Try Running the Demo App

Launch the Flutter app again (execute 'lib/main.dart' from the IDE). Sign up with your email and password. You'll receive a confirmation email; make sure to confirm it. It will take you to 'localhost:3000,' but you don't need to worry about it. Then, log in again with your email and password.

You'll see that the data previously pre-registered with the 'databse.sql' you ran earlier, such as 'Shopping list,' is displayed.

When you add lists and TODO items, you'll see that the data is synced with SupaBase.

That's it for now.

There's still much to learn about implementing the Todo List itself, but for this article, I'll stop here.

https://github.com/journeyapps/powersync-supabase-flutter-todolist-demo/tree/main