Used in conjunction with FlutterFlow, PowerSync enables developers to build offline-first apps that are robust in poor network conditions and have highly responsive frontends while relying on Supabase for their backend. This guide provides instructions for configuring PowerSync for use with your FlutterFlow project that has Supabase integration enabled.

​

Guide Overview

1. Create your FlutterFlow project, integrated with Supabase
2. Connect your project to GitHub
3. Set up the PowerSync Service
4. Add PowerSync to Your Flutter Project
5. Lifecycle / Maintenance Considerations

​

Create Your FlutterFlow Project

This guide assumes you are starting by following FlutterFlow’s tutorial ‘Build a Notes App With FlutterFlow and Supabase’. Some small changes are required to bring this tutorial up to date with the latest Supabase and to make adding PowerSync simpler:

1. Create your notes table using the UUID type for your id column instead of int. It’s simpler to work with UUID based primary key columns in PowerSync.
2. Disable Row Level Security (RLS) in Step 3 - Creating the notes table. Since the FlutterFlow tutorial was published, RLS is now mandatory for new tables created in Supabase. This is for development purposes only — it’s important to use RLS in production.
3. Enable insert permissions for the Storage object in Step 4 - Creating a Storage Bucket. Without this, users won’t be able to upload images.

This can be found under Dashboard -> Storage -> Policies. This policy is a template provided by Supabase. 4. In Step 10 - Displaying Data in the UI, pass the id column as a parameter instead of the entire row.

​

Connect Your Project to GitHub

1. Follow FlutterFlow’s instructions published here: Manage Custom Code In GitHub
2. It’s a good idea to make sure you can launch your app using flutter run at this point.

​

Set Up the PowerSync Service

1. In your Supabase project’s SQL console, run the following:

CREATE PUBLICATION powersync FOR TABLE notes;

2. Connect PowerSync to your Supabase environment, as detailed in our Supabase Guide.
3. Deploy the below Sync Rules:

# Sync-rule docs: https://docs.powersync.com/usage/sync-rules
bucket_definitions:
  global:
    data:
      # Sync all rows
      - SELECT * FROM notes

​

PowerSync Flutter Integration

At a high level, the steps required in your Flutter code are as follows:

1. Install the PowerSync Dart package
2. Import helper functions
3. Define your app schema
4. Smoke test
5. Define your models
6. Connect your UI

All of the work in this section will be performed on the develop branch that you should have set up at this point.

​

Install PowerSync

1. Add the powersync Dart package to your pubspec.yaml file: powersync: ^0.4.1
   1. It’s also useful to have a decent Logging framework in your app, so we recommend adding logging: ^1.1.1
2. Run flutter pub get and iteratively resolve any dependency issues, for example updating flutter_cache_manager: 3.3.0 to flutter_cache_manager: ^3.3.0
   1. See this commit to see exactly which dependencies we had to resolve.

​

Import Helper Functions

1. Create a new file lib/powersync/powersync.dart and copy the contents of this file:

https://github.com/powersync-ja/powersync-flutterflow-notes-demo/blob/powersync/lib/powersync/powersync.dart

2. Replace the default value of powersyncUrl on line 12 with the value of your PowerSync Service Instance — you can obtain this by opening your Instance properties and copying the value of “Instance URL”:
3. Make the following changes in lib/main.dart:
   1. Add the following imports:
      Copy

      import 'package:flutter/foundation.dart';
      import './powersync/powersync.dart';
      import 'package:logging/logging.dart';
      

   2. Add the below snippet and test query immediately before runApp(MyApp()):

  await openDatabase();

  waitForInitialSync();

  try {
    final test_query = await db.execute('SELECT * from notes');
    log.info('test_query results = $test_query');
  } on Exception catch (e) {
    log.info('error querying notes table: $e');
  }

​

Define App Schema

Import the following file into your project, it should be located in lib/powersync/models.schema.dart:

​

Smoke Test

At this point, you can launch your app using flutter run, and you should see some ‘notes’ rows from your Supabase being printed out on the console! Something like this:

I/flutter (27958): [powersync-supabase] INFO: 2023-10-23 14:23:59.408889: test_query results = [{id: 4aeaabcd-4143-438d-a49b-903e051ec4bc, id:1: 4aeaabcd-4143-438d-a49b-903e051ec4bc, created_at: 2023-10-23 13:26:34.436Z, title: first note, note: success!, image_link: https://xyz.supabase.co/storage/v1/object/public/notes/users/uploads/1698089188788000.png}, {id: 56e99a0f-3e47-4d12-8fbe-5cb2b45da8ec, id:1: 56e99a0f-3e47-4d12-8fbe-5cb2b45da8ec, created_at: 2023-10-23 13:27:51.015Z, title: second note, note: workes :) , image_link: https://xyz.supabase.co/storage/v1/object/public/notes/users/uploads/1698089268369000.png}]

​

Define Your Models

FlutterFlow generates some models in backend/supabase/database/tables — we complement these by implementing our own offline-first models with static access methods.

Import the following ‘notes’ model into your project:

https://github.com/powersync-ja/powersync-flutterflow-notes-demo/blob/powersync/lib/powersync/models/notes.dart

​

Connect Your UI

Generally speaking, you’ll want to replace any Supabase calls in your UI with the newly implemented methods from the appropriate models defined in the previous step.

In this app, we need to update three pages: home_list_page, note_display_page, and create_note_page. It’s recommended to do these one at a time.

​

Notes Display Page

Copy the changes from this commit into your notes display page.

Run your app and verify whether you can launch and see your notes list without connectivity (i.e., in offline mode).

Then repeat the steps for the note display and create note pages (link to commit).

​

Additional Resources

For more information, explore the PowerSync docs or join us on our community Discord where our team is always available to answer questions.