How to deploy Drift DB with flutter on ALL platforms.

Ian Speer — Sun, 07 Sep 2025 21:54:40 +0000

When I say all, I mean it. Windows, macOS, Linux, Android, iOS and WASM with JS failover.

While the oem drift website is a good source, it combines many different types of deployments on each page making it in-optimal to manually parse. Drift is much easier to deploy today than demonstrated before in most older posts. This is a simple step by step cheat-sheet to get you up and running fast so you can spend more time actually learning to use drift rather than figuring out how to simply deploy it in a way that retains flutters platform agnosticism benefits.

run the following command within your project root to add all dependencies:

dart pub add drift drift_flutter path_provider dev:drift_dev dev:build_runner

Reference Example File Structure

lib/
├── data/
│   ├── tables/
│   │   └── todo_table.dart
│   └── database.dart
└── main.dart

web/
├── sqlite3.wasm    (add this file)
└── drift_worker.js    (add this file)

You will need to download and place the official sqlite3.wasm & drift_worker.js files in the top of the web/ folder as drawn out above.

Obtain the files from their official sources here:
sqlite3.wasm: https://github.com/simolus3/sqlite3.dart/releases
drift_worker.js: https://github.com/simolus3/drift/releases

fill data/tables/todo_table.dart with the following content(example):

import 'package:drift/drift.dart';

class TodoItems extends Table {

IntColumn get id => integer().autoIncrement()();
TextColumn get title => text().withLength(min: 6, max: 32)();
TextColumn get content => text().named('body')();
DateTimeColumn get createdAt => dateTime().nullable()();

}

fill data/database.dart with the following content(example):

import 'package:drift/drift.dart';
import 'package:drift_flutter/drift_flutter.dart';

///import all your tables
import 'tables/todo_table.dart';

part 'database.g.dart';

@DriftDatabase(tables: [TodoItems])
class AppDatabase extends _$AppDatabase {
  AppDatabase() : super(_connectWithDriftFlutter());

  @override
  int get schemaVersion => 1;

  static QueryExecutor _connectWithDriftFlutter() {
    return driftDatabase(
      name: 'my_app_db',
      web: DriftWebOptions(
        sqlite3Wasm: Uri.parse('sqlite3.wasm'),
        driftWorker: Uri.parse('drift_worker.js'),
      ),
    );
  }
}

The great majority of the above database.dart code is boilerplate, much of which will be the same throughout all your projects -

Build Database:

dart run build_runner build --delete-conflicting-outputs

WebServer headers (customize to server in use)

Content-Type: application/wasm
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Alt: Deploy with flutter:
Local JS:

flutter run -d web-server --web-hostname 0.0.0.0 --web-port 3000

Local WASM:

flutter run -d web-server --web-hostname 0.0.0.0 --web-port 3000 --wasm

please note depending on your system configuration you may or may not be able to access these over your network using the local test methods above, however to truly test this over the net you will want to use a real webserver and set the appropriate headers as noted.

DEV Community: Ian Speer

How to deploy Drift DB with flutter on ALL platforms.

Reference Example File Structure