Support for WebAssembly (Wasm)
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.
flutter build web --wasm
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).
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.
final isRunningWithWasm = identical(double.nan, double.nan);
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 does not support WasmGC yet. 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 replacesdart:html
(and other web libraries)dart:js_interop
, which replacespackage:js
anddart:js
除非另有说明,本文档之所提及适用于 Flutter 的最新稳定版本,本页面最后更新时间: 2024-12-02。 查看文档源码 或者 为本页面内容提出建议。