With the release of Flutter 3.10 , Flutter Web has also attracted its most "milestone" update. The "milestone" here does not mean how important the update of Flutter Web is this time, but that the official Flutter finally has a clear understanding of the Web. positioning and orientation .
promote
First of all, let's briefly talk about improvement. This is not the focus of this article, but just incidentally.
This improvement mainly lies in two major points: **Element embedding support and fragment shaders support**.
The first is Element embedding. Starting from Flutter 3.10, you can now embed Flutter Web into any HTML element of a web page, with flutter.jsengine and hostElementinitialization parameters .
Simply put, it is iframeunnecessary . As shown in the following code, you only need to specify the embedded element through the parameterinitializeEngine of , and the flexibility support has been improved .hostElement
<html>
<head>
<!-- ... -->
<script src="flutter.js" defer></script>
</head>
<body>
<!-- Ensure your flutter target is present on the page... -->
<div id="flutter_host">Loading...</div>
<script>
window.addEventListener("load", function (ev) {
_flutter.loader.loadEntrypoint({
onEntrypointLoaded: async function(engineInitializer) {
let appRunner = await engineInitializer.initializeEngine({
// Pass a reference to "div#flutter_host" into the Flutter engine.
hostElement: document.querySelector("#flutter_host")
});
await appRunner.runApp();
}
});
});
</script>
</body>
</html>
PS: If your project was created in Flutter 2.10 or earlier, delete
/webthe file , and thenflutter create . --platforms=webrecreate the template via .
You may not use the fragment shaders part under normal circumstances. Shaders are GLSL files that appear with .fragthe extension name. In Flutter, they are declared pubspec.yamlin shadersunder . Now it supports the Web:
flutter:
shaders:
- shaders/myshader.frag
Generally, the frag file will be loaded into
FragmentProgramthe object , and the corresponding one can be obtained through the programshader, and then used for drawingPaint.shaderthrough . Of course, there are restrictions on the shaders files in Flutter, for example, UBO and SSBO are not supported.
Of course, this is not to explain shaders, but to announce that Flutter Web supports shaders .
future
In fact, the future is the focus of this article . We know that Flutter has been "compromising" in the support of the Web field. Flutter Web has always been in a special position in the entire Flutter system, because it has always had two rendering methods: html and canvaskit .
Simply put, html is transformed into JS + Html Element rendering, and canvaskit uses Skia + WebAssembly , and the html mode makes the Web appear "out of place" in Flutter, and path dependence and maintenance costs have always been a headache for Flutter Web .
Faced with this dilemma, the official proposed to re-plan the future of Flutter Web at the Flutter Forword conference at the beginning of the year. With the release of Flutter 3.10, the official finally has a clear positioning for the future of the Web:
"Flutter is the first framework to be architected around emerging web technologies like CanvasKit and WebAssembly."
The Flutter team stated that the positioning of Flutter Web is not designed as a general-purpose Web framework . There are many similar Web frameworks, such as Angular and React, which perform very well in this field, and Flutter should be structured around new technologies such as CanvasKit and WebAssembly . Frame for design.
Therefore, the future route of Flutter Web will be more CanvasKit, that is, WebAssembly + Skia. At the same time, Dart is also continuing to cultivate in this field: starting from Dart 3, the support for Web will gradually evolve into the Dart native positioning of WebAssembly .
What is WebAssembly's dart native? Flutter's support for WebAssembly has always been: use Wasm to process CanvasKit's runtime, and Dart code will be compiled into JS, and this is actually a "compromise" transition period for the Dart team.
With the in-depth cooperation between the official and multiple teams in the WebAssembly ecosystem, Dart has begun to support direct compilation into native wasm code, and a garbage collection implementation called WasmGC has been introduced into the standard . This extension is currently implemented in Chromium-based browsers. and Firefox browsers are stabilizing.
Currently in benchmarks, execution is 3x faster
To compile Dart and Flutter into Wasm, you need a browser that supports WasmGC . Chromium V8 and Firefox team's browsers are currently supporting it, such as under Chromium:
Effective support for high-level languages has been added to WebAssembly through struct and array types, and language compilers targeting Wasm can integrate with the garbage collector in the host VM. Enabling this feature in Chrome means enabling typed function references, which store function references in the aforementioned structures and arrays.
Now you can try the wasm support in advance under the Flutter master branch. flutter build web --helpIf , it means that wasm compilation is supported.
Then flutter build web --wasmexecute to compile a web package with native dart wasm. After the command is executed, the product will be output to build/web_wasmthe directory.
After that, you can use dhttpdthe package build/web_wasmto execute the local service under the directory, and then preview the effect in the browser.
> cd build/web_wasm
> dhttpd
Server started on port 8080
Currently, version 112 or higher of Chromium is required to support it, and the corresponding Chrome flag needs to be enabled:
enable-experimental-webassembly-stack-switchingenable-webassembly-garbage-collection
Of course, there are still some limitations at this stage, such as:
The Dart Wasm compiler takes advantage of the JavaScript-Promise Integration (JSPI) feature, and Firefox does not support the JSPI proposal, so once Dart migrates from JSPI, Firefox should enable the appropriate flags to run.
JS-interop support is also needed, because in order to support Wasm, Dart changed the way it supports APIs for browsers and JavaScript. This change is to prevent compiling dart:html or package:jsas url_launcher will use these libraries.
Finally, currently DevTools does not flutter runsupport running and debugging Wasm .
at last
It's great to see that the Flutter team has finally set the future course of the Web, which makes the future of the Web clearer. Of course, as mentioned earlier, Flutter is the first framework for architectural design around emerging Web technologies such as CanvasKit and WebAssembly .
So Flutter Web is not designed as a general web framework to compete with Angular and React. It allows you to release your capabilities to the Web field when using Flutter, and the consistency brought by CanvasKit is more in line with Flutter Web . Of course, solving the problem of loading time will be a long way to go.