Flutter Web Support (Alpha)

Web support for Flutter is currently in an alpha release.

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 alpha-release 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.3.0-alpha.1'

The latest prerelease 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. This is typically achieved by placing the files in the project web directory.

• sqlite3.wasm can be found here

• powersync_db.worker.js can be found in the repo's releases page.

Currently the Drift SQLite library is used under the hood for DB connections. See here for detailed compatibility and setup notes.

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.

Multiple tab support is not yet available. Using multiple tabs will break.