Support for WebAssembly (Wasm) (original) (raw)

Flutter and Dart support WebAssembly as a compilation target when building applications for the web.

Get started

To try a pre-built Flutter web app using Wasm, check out the Wonderous demo app.

To experiment with Wasm in your own apps, use the following steps.

Switch to the latest version of Flutter

Switch to Flutter version 3.24 or higher to run and compile Flutter applications to WebAssembly. To ensure you are running the latest version, run flutter upgrade.

Ensure that your app's dependencies are compatible

Try the default template sample app, or choose any Flutter application that has been migrated to be compatible with Wasm.

Modify the index page

Make sure your app's web/index.html is updated to the latest Flutter web app initialization for Flutter 3.22 and later.

If you would like to use the default, delete the contents of the web/ directory and run the following command to regenerate them:

flutter create . --platforms web

Run or build your app

To run the app with Wasm for development or testing, use the --wasm flag with the flutter run command.

flutter run -d chrome --wasm

To build a web application with Wasm, add the --wasm flag to the existing flutter build web command.

The command produces output into the build/web directory relative to the package root, just like flutter build web.

Open the app in a compatible web browser

Even with the --wasm flag, Flutter will still compile the application to JavaScript. If WasmGC support is not detected at runtime, the JavaScript output is used so the application will continue to work in all major browsers.

You can verify whether the app is actually running with Wasm by checking for the dart2wasm environment variable, set during compilation (preferred).

dart

const isRunningWithWasm = bool.fromEnvironment('dart.tool.dart2wasm');

Alternatively, you can use differences in number representations to test whether the native (Wasm) number representaton is used.

dart

final isRunningWithWasm = identical(double.nan, double.nan);

Serve the built output with an HTTP server

Flutter web WebAssembly can use multiple threads to render your application faster, with less jank. To do this, Flutter uses advanced browser features that require specific HTTP response headers.

Name	Value
Cross-Origin-Embedder-Policy	credentialless or require-corp
Cross-Origin-Opener-Policy	same-origin

To learn more about these headers, check out Load cross-origin resources without CORP headers using COEP: credentialless.

Learn more about browser compatibility

To run a Flutter app that has been compiled to Wasm, you need a browser that supports WasmGC.

Chromium and V8 support WasmGC since version 119. Chrome on iOS uses WebKit, which doesn't yet support WasmGC. Firefox announced stable support for WasmGC in Firefox 120, but currently doesn't work due to a known limitation (see details below).

Why not Firefox? Firefox versions 120 and later were previously able to run Flutter/Wasm, but they're experiencing a bug that is blocking compatibility with Flutter's Wasm renderer. Follow this bug for details.
Why not Safari? Safari now supports WasmGC, but is experiencing a similar bug that is blocking compatibility with Flutter's Wasm renderer. Follow this bug for details.

Using compatible JS interop libraries

To support compilation to Wasm, Dart has changed how it enables interop with browser and JavaScript APIs. This prevents Dart code that uses dart:html or package:js from compiling to Wasm.

Instead, Dart now provides new, lightweight interop solutions built around static JS interop:

package:web, which replaces dart:html (and other web libraries)
dart:js_interop, which replaces package:js and dart:js

To learn more about JS interop in Dart, see Dart's JS interop documentation page.

Was this page's content helpful?

Thank you for your feedback! Please let us know what we can do to improve.

Provide details

Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2025-05-27. View source or report an issue.