Announcement
February 15, 2024
February 15, 2024
(updated)

Announcing PowerSync Flutter Web Support

Benita Volkmann

Flutter Web SDK

Today we are announcing the alpha release of web support for our existing Flutter SDK.

With this release, Flutter developers can use the same Dart codebase to build local-first web and mobile apps with simplified state management and real-time reactivity. This release extends the PowerSync Flutter SDK to support web applications, allowing them access to the benefits of local-first architecture, including simplified state management. As with our JavaScript Web SDK, the Flutter web implementation utilizes a virtual file system (VFS) interface to persist SQLite data in the browser storage (IndexedDB by default.)

SDK Features

  • Connects to PowerSync service to sync data with any backend Postgres database.
  • Instantly-reactive UI interactions for the user.
  • Real-time streaming of changes.
  • Operations are asynchronous by default — they do not block UI interactions.
  • Supports one write and many reads concurrently.
  • No need for client-side database migrations — these are handled automatically.

Engineering Notes

At PowerSync, our goal is to be stack-agnostic, which is why incorporating web support for Flutter apps was a major milestone for us. 

The engineering work involved in supporting Flutter web was substantial because the web paradigm differs fundamentally from native platforms. Addressing tasks like storage and asynchronous database operations on web adds layers of complexity. 

To accommodate these differences, we had to restructure our existing codebase significantly. In our implementation, we introduced abstraction layers for core functionality in the sqlite_async.dart and powersync.dart libraries. 

This separation enabled us to have distinct implementations for web and native platforms on aspects such as database connections. This all happens under the hood — the developer still calls the same API, which uses [.inline-code-snippet]common[.inline-code-snippet] typings that are available on both native and web.

Limitations

Note that multiple tab support is not yet available. Using a web application in multiple tabs will cause database connection conflicts. We plan to implement support for this soon.

Demo App

The easiest way to test out the alpha version is to run the existing Supabase Todo-List demo app in your browser. Instructions for this can be found in the SDK’s README. Make sure you checkout the [.inline-code-snippet]alpha-release[.inline-code-snippet] branch when you follow these instructions.

We would love to hear your feedback. Reach out to us on Discord if you have any feedback, need help or have any questions.