Flutter Web Support (Alpha)

Web support for Flutter in version ^1.6.0 is currently in its alpha stage.

Demo app

The easiest way to test out the alpha is to run the Supabase Todo-List demo app:

1. Checkout the powersync.dart repo's master branch.

   1. Note: If you are an existing user updating to the latest code after a git pull, run melos exec 'flutter pub upgrade' in the repo's root and make sure it succeeds.

2. Run melos prepare in the repo's root

3. cd into the demos/supabase-todolist folder

4. If you haven’t yet: cp lib/app_config_template.dart lib/app_config.dart (optionally update this config with your own Supabase and PowerSync project details).

5. Run flutter run -d chrome

Installing PowerSync in your own project

Install the latest alpha version of the package, for example:

flutter pub add powersync:'^1.6.2'

The latest version can be found here.

Additional config

Web support requires sqlite3.wasm and powersync_db.worker.js assets to be served from the web application. They can be downloaded to the web directory by running the following command in your application's root folder.

dart run powersync:setup_web

The same code is used for initializing native and web PowerSyncDatabase clients.

Imports

Flutter Web does not support importing directly from sqlite3.dart as it uses dart:ffi.

Change imports from:

import 'package/powersync/sqlite3.dart`

to:

import 'package/powersync/sqlite3_common.dart'

in code which needs to run on the Web platform. Isolated native-specific code can still import from sqlite3.dart.

Database connections

Web database connections do not support concurrency. A single database connection is used. readLock and writeLock contexts do not implement checks for preventing writable queries in read connections and vice-versa.

Direct access to the synchronous CommonDatabase (sqlite.Database equivalent for web) connection is not available. computeWithDatabase is not available on web.

Limitations

The API for web is essentially the same as for native platforms. Some features within PowerSyncDatabase clients are not available.

Full multiple tab support is not yet available. Some sync status indicators will not be available in each tab. Multiple requests from tabs to connect/disconnect might result in undefined behaviour.