Flutter 3.10 发布，Element 和 Fragment Shader 支持 Web 路径已定，可用性得到提升

随着 Flutter 3.10 的发布，Flutter Web 也推出了它的“最大”更新，“里程碑”这里不Flutter Web 这次有什么大的更新呢，不过 Flutter 官方对 Web 的定位和方向已经很明确了，主要有两点： Element embedding 支持和 Fragment Shader 支持 .En 第一个是 element 嵌入，开始Flutter 3.10。现在您可以将 Flutter Web 嵌入到网页上的任何 HTML 元素中，使用 Flutter .js 引擎和 Hostelement 您不需要初始化参数 ‸ .iframe，如下代码所示，只需要使用参数初始化hostelement .. --platforms=web 重建模板。

某些片段着色器在正常情况下无法使用。着色器是 GLSL 文件，其扩展名为 .frag。在 Flutter 中，它们位于文件 pubspec.yaml 中。下面的shaders，现在已经支持web了：

flutter:
shaders:
  - shaders/myshader.frag

一般情况下，运行的时候，frag文件加载到FragmentProgram，FragmentProgram即可使用着色器获得，然后使用Paint.shader进行绘制。当然，Flutter 中的着色器文件有一些限制，例如它们不支持 UBO 和 SSBO。

当然，这不是为了解释着色器，而是宣布 Flutter Web 支持着色器。

未来

其实这篇文章关注的是未来。我们知道Flutter在web领域支持上做出了“妥协”。 Flutter Web 在整个 Flutter 体系中一直有着特殊的地位，因为一直有两种渲染方式：html 和 canvaskit。

简单来说，html 转换为 JS + Html Element 进行渲染，而 canvaskit 使用 Skia + WebAssembly。 html 模式让 Web 在 Flutter 中显得“不兼容”，路径依赖和维护成本一直是 Flutter Web 的问题。

面对这样的困境，今年早些时候的Flutter Forword大会上，一位官方提出重新规划Flutter Web的未来。随着 Flutter 3.10 的发布，官方终于对 Web 的未来有了明确的定位：

“Flutter 是第一个为 CanvasKit 和 WebAssembly 等新 Web 技术设计的框架。”

Flutter 团队表示，Flutter Web 并不是被设计为通用的 Web 框架。目前，有很多类似的 Web 框架如 Angular 和 React 在这方面做得非常好，而 Flutter 应该是围绕 CanvasKit 和 WebAssembly 等新技术的架构设计框架。

所以Flutter Web未来的路径将是CanvasKit，即WebAssembly + Skia。同时，Dart也在这方面不断深耕：从Dart 3开始，从3开始，Web支持将逐渐演变为原生Dart WebAssembly

Co的位置。 WebAssembly 的 Dart 是原生的吗？ Flutter对WebAssembly的支持一直是：使用Wasm来处理CanvasKit运行时，而Dart代码将被编译为JS，而这实际上是Dart团队的一个“妥协”过渡期。

随着官方与 WebAssembly 生态中多个团队的深入合作，Dart 开始支持直接编译为原生 wasm 代码，并且一个名为 WasmGC 的垃圾回收实现被引入到

标准中。该扩展实现目前在基于 Chromium 和 Firefox 的浏览器中变得稳定。

目前在基准测试中，执行速度提升了3倍

要将Dart和Flutter编译成Wasm，需要一个支持WasmGC的浏览器。目前 Chromium V8 和 Firefox 团队浏览器都支持它。例如，在 Chromium 下：

通过结构体和字段类型为 WebAssembly 添加了对高级语言的强大支持，并且针对 Wasm 的语言编译器可以与主机 VM 中的垃圾收集器集成。在Chrome中启用此功能意味着启用指定的函数引用，这会将函数引用存储在上述结构体和字段中。

您现在可以在 Flutter master 分支下预测试 wasm 支持。运行 flutter build web --help 如果出现下图场景，说明支持 wasm 编译。

之后，运行 flutter build web --wasm 使用原生 dart wasm 编译 webpack。执行命令后，产品将发送到目录build/web_wasm。

然后就可以在pub上使用包dhttpd启动本地服务在浏览器目录下的build/web_wasm效果，预览

> cd build/web_wasm
> dhttpd
Server started on port 8080

Chromium版本112以上版本是目前需要支持更高，并且必须启用相应的 Chrome 标志：

• enable-experimental-webassemble-stack-switching♓enable-web assembly-garbage-coll 当然，现阶段仍然存在一些限制，例如如：

  Dart Wasm 编译器使用 JavaScript-Promise 集成 (JSPI) 功能。 Firefox 不支持 JSPI 设计，因此一旦 Dart 从 JSPI 迁移，Firefox 就应该启用适当的标志位。跑步。

  还需要 JS-interop 支持，因为为了支持 Wasm，Dart 改变了其对浏览器和 JavaScript 的 API 支持方式。此更改是为了防止 dart:html 或 package:js 在 Wasm 中编译为 Dart 代码，并且该平台的大多数包（例如 url_launcher）都使用这些库。

  最后，目前，DevTools 不支持flutter run来运行和调试 Wasm。

  终于

  很高兴看到Flutter团队终于确定了网站未来的发展路径，这让网站的未来变得清晰起来。当然，如前所述，Flutter 是第一个专注于 CanvasKit 以及 WebAssembly 等 Web 新技术的架构设计框架。

  因此，Flutter Web 并不是被设计为与 Angular 和 React 竞争的通用 Web 框架。使用Flutter时，它可以让你很好地将你的能力释放到Web领域，而CanvasKit带来的Consistency更符合Flutter Web的放置。当然，解决加载时间问题的希望渺茫。