Introducing a local database that auto-syncs with Supabase

PowerSync’s new FlutterFlow library provides a simple way to build offline-first apps. Offline-first apps read and write from a database embedded within a FlutterFlow app that is kept in sync with Supabase in the background.

Three end-user benefits of offline-first apps

1. App interactions are instant

Since there’s no need for network calls to query or update data, there’s an instant response for user interactions.

2. Data updates are streamed to all users in real-time

When data is updated by one user, it’s immediately streamed to all other users or devices that have access to that data.

3. Apps are always available, even without a network connection

Since data is available in a local database, there’s no need to fetch data across the network. Apps work offline.

How does it work?

Under the hood, the PowerSync library stores data in a high-performance SQLite database. It also provides a set of components and actions that are used to read and write data to and from app components. 

To get more specific, we can consider the read path (the path data takes from Supabase to the UI of your FlutterFlow app) and the write path (the path data takes from the UI back to Supabase) separately:

Read Path

The local SQLite database is kept fresh by the PowerSync Service which picks up changes in Supabase automatically and streams them to the app. This triggers an update in the auto-updating components provided by the library: PowerSyncQuery and PowerSyncStateUpdater. Those components are then responsible for updating parts of the UI. So application developers just write their queries and bind results to components — PowerSync uses state management tools provided by FlutterFlow to take care of the synchronization.

Write Path

Data updates made in the app (e.g. through the powersyncWrite custom action) are applied directly to the local SQLite database and also copied to an upload queue. The upload queue uses the provided Supabase connector to upload these rows to Supabase in the background.

Key Components and Actions

Here are the key components and custom actions provided by the library:

For reading data:

• PowerSyncQuery – Real-time query for Layout Elements with Dynamic Children e.g. the ListView Element.
• PowerSyncStateUpdater – Real-time query for basic Layout Elements e.g. the Text Elements.
• PowerSyncQueryOnce – Once-off query for static data.

For writing data:

• powersyncWrite – Custom action for creating, updating and deleting data.

For displaying connectivity and sync status:

• PowerSyncConnectivity – Custom component for displaying real-time connectivity and sync status.

Apps use PowerSync with FlutterFlow today

Before this library, many developers had already integrated PowerSync with FlutterFlow, through a much more complicated process with various workarounds. Thankfully this new library solves those issues!

Here’s Yorgo Hoebeke showing off how sync works in his app Orakemu:

Another FlutterFlow app called TrashBlitz was featured in this blog post.

How to get started

Here’s what you need to get started:

1. Supabase account (free plan available)
2. PowerSync account (free plan available)
3. Follow the PowerSync FlutterFlow Integration Guide which covers all necessary steps.

If you have any questions, the dedicated #flutterflow channel in PowerSync’s Discord server is the perfect place to ask. Join the PowerSync Discord.