Flutter has exciting news for web developers: WebAssembly (Wasm) is now a stable compilation target! This advancement enables faster, more efficient web applications. By leveraging Wasm, Flutter and Dart teams offer enhanced web performance, making it an ideal time to explore and integrate this powerful feature.
Last updated: May 14, 2024
The Flutter and Dart teams are thrilled to announce that WebAssembly (Wasm) is now a stable compilation target for web applications.
package:web
and dart:js_interop
to make them Wasm compatible. See the Requires JS-interop section for details.To run a Flutter app compiled to Wasm, you need a browser that supports WasmGC.
You can try a pre-built Flutter web app using Wasm by checking out the Wonderous demo app.
To experiment with Wasm in your own apps, follow these steps:
To make sure you have the latest version, run:
flutter upgrade
Verify that your Flutter install supports Wasm by running:
flutter build web --help
At the bottom of the output, you should see experimental Wasm options like:
Experimental options:
--wasm Compile to WebAssembly (with fallback to JavaScript).
--[no-]strip-wasm Strip the resulting wasm file of static symbol names. (defaults to on)
You can use the default template sample app or any Flutter application that has been migrated to be compatible with Wasm.
index.html
Ensure your app’s web/index.html
is updated to the latest Flutter web app initialization for Flutter 3.22 and later.
To build a web application with Wasm, add the --wasm
flag:
flutter build web --wasm
This command produces output in the build/web
directory, similar to flutter build web
.
Flutter web with Wasm uses multiple threads to render your app faster. This requires specific HTTP response headers.
Flutter web apps won’t run with WebAssembly unless the server is configured to send these headers:
credentialless
or require-corp
same-origin
Learn more about these headers here.
If you don’t have a local HTTP server, use the dhttpd
package:
flutter pub global activate dhttpd
Then navigate to the build/web
directory and run the server:
cd build/web
dhttpd '--headers=Cross-Origin-Embedder-Policy=credentialless;Cross-Origin-Opener-Policy=same-origin'
The server starts on port 8080.
As of May 14, 2024, only Chromium-based browsers (version 119 or later) can run Flutter/Wasm content. Open localhost:8080
in the browser to view the app.
If the app doesn’t load, check the developer console for errors and validate a successful build with the JavaScript output.
Wasm cannot run on the iOS version of any browser because all iOS browsers must use WebKit, which does not support WasmGC.
To support Wasm compilation, Dart has updated how it handles interop with browser and JavaScript APIs. This change means Dart code using dart:html
or package:js
won’t compile to Wasm.
Dart now offers new interop solutions:
package:web
: Replaces dart:html
dart:js_interop
: Replaces package:js
and dart:js
Most Dart and Flutter team packages, like package:url_launcher
, have been migrated for Wasm support. Check the JS interop documentation and the package:web
migration guide to learn more.
If a Wasm build fails due to incompatible APIs, the error output will typically show this soon after a build starts. An error might look like this:
Target dart2wasm failed: Exception: .../url_launcher_web.dart: Error: Dart library 'dart:html' is not available on this platform.
import 'dart:html' as html;
This error indicates the need to migrate to compatible packages.
Also read:
Google Introduces WebAssembly Support for Flutter and Dart
Googles Gemini Integration in the Play Store
Feature | Description |
---|---|
Wasm Support | WebAssembly (Wasm) is now a stable compilation target for Flutter web applications. |
Stability | Wasm support and Dart’s new web interop are both stable. |
Background | Requires a browser that supports WasmGC (Chromium 119+, Firefox 120 with known bug, Safari does not yet). |
Trying it Out | – Wonderous demo app showcases Wasm compilation. – Follow steps to experiment in your own apps. |
Compatibility | Requires Flutter 3.22 or newer (check with flutter upgrade ). |
Building with Wasm | Use the --wasm flag with flutter build web . |
Serving Wasm | Requires specific HTTP response headers (CORS). Use dhttpd package for local serving. |
Browser Compatibility | Currently only Chromium-based browsers (version 119+) can run Flutter/Wasm content. |
iOS Limitations | Wasm cannot run on iOS browsers due to WebKit limitations. |
JS Interop | Requires migration to package:web and dart:js_interop for Wasm compatibility. |
Checking for Incompatible APIs | Build errors will indicate incompatible APIs like dart:html . |
Join Our Whatsapp Group
Join Telegram group
The Flutter and Dart teams have made WebAssembly (Wasm) a stable compilation target for web applications. This means you can now compile your Flutter web apps to Wasm for better performance and broader compatibility.
WasmGC (WebAssembly Garbage Collection) is a feature that allows WebAssembly to manage memory more efficiently. It is essential for running complex applications like those built with Flutter on the web.
You can try a pre-built Flutter web app using Wasm by checking out the Wonderous demo app. Additionally, you can experiment with Wasm in your own apps by following these steps:
web/index.html
file.--wasm
flag.Run the following command to upgrade to the latest version:
flutter upgrade
Then, verify that your installation supports Wasm by running:
flutter build web --help
You should see experimental Wasm options at the bottom of the output.
index.html
?Ensure your app’s web/index.html
is updated to the latest Flutter web app initialization for Flutter 3.22 and later.
To build your Flutter web app with Wasm, add the --wasm
flag to the build command:
flutter build web --wasm
This will compile your app to Wasm and produce output in the build/web
directory.
You need to configure your HTTP server to send the following headers:
credentialless
or require-corp
same-origin
These headers are necessary for enabling multiple threads and other advanced browser features that improve performance.
Join Our Whatsapp Group
Join Telegram group
If you don’t have a local HTTP server, you can use the dhttpd
package:
flutter pub global activate dhttpd
Then navigate to the build/web
directory and run the server with special headers:
cd build/web
dhttpd '--headers=Cross-Origin-Embedder-Policy=credentialless;Cross-Origin-Opener-Policy=same-origin'
The server will start on port 8080.
Ensure that you are using a compatible Chromium-based browser (version 119 or later). Open localhost:8080
in the browser to view the app. If the application doesn’t load, check the developer console for errors and validate that the build was successful with the JavaScript output.
dart:html
or package:js
won’t compile to Wasm. Use package:web
and dart:js_interop
instead.To migrate your packages:
package:web
to replace dart:html
.dart:js_interop
to replace package:js
and dart:js
.Most packages, such as package:url_launcher
, have already been migrated. Check the JS interop documentation and the package:web
migration guide for more details.
Review the error output for details on the incompatible APIs. An error might look like this:
Target dart2wasm failed: Exception: .../url_launcher_web.dart: Error: Dart library 'dart:html' is not available on this platform.
import 'dart:html' as html;
This indicates that you need to migrate to compatible packages using package:web
and dart:js_interop
.
In honor of the International Day of Family Remittances (IDFR) 2024, Flutterwave, Africa's leading payment…
PadhAI, a groundbreaking AI app, has stunned the education world by scoring 170 out of…
Vector databases are essential for managing high-dimensional data efficiently, making them crucial in fields like…
Welcome to the whimsical world of Flutter app development services! From crafting sleek, cross-platform applications…
Flutter, Google's UI toolkit, has revolutionized app development by enabling developers to build natively compiled…
SQL (Structured Query Language) is a powerful tool for managing and manipulating databases. From converting…