本文可能是全网首篇探索 2023 Flutter Forward 中关于Flutter element embedding的文章。

前沿

（是的，没写错，不是“前言”，只因看到这篇文章的你已经走近技术的最前沿了 ～）

Flutter element embedding 是什么？

简单的说，就是把 Flutter 代码当做一个<div>嵌入到 Web 页面中，且可以相互操作。

在这之前，Flutter for Web 想嵌入到 Web 页面中，就只能通过<iframe>的方式嵌入，这个笔者在以前也是尝试过多种奇淫巧技，想让 Vue 代码与 Flutter for Web 页面深度融合，但都不切实际。笔者最后就完全去使用 Flutter 布局实现（Flutter Web - 优雅的兼容 Flutter App 代码）。

为什么说它可能是 Web 的未来？

1. 现在流行的各类前端 UI 组件库（Ant、Vant 等等），都是被现代前端框架（Vue、React）限制住的，而字节的 semi 虽然是超脱于框架本身，但其实还是被前端语言束缚的。虽然说前端基本可以一统天下，但想进一步在桌面/移动终端提高渲染能力时，能选择的方案就很有限。

这里额外解释下：

比如 RN、weex 等混合渲染方案，但这些方案本身是很难支持纯前端的，演进上就会变成 RN for Web，但这其实不符合前端趋势的。

那如同 uni-app 这种封装全家桶方案，问题是很多，但它在发展上完全可以用 Flutter element embedding 来面向未来（可能换车道也很难）。

1. Flutter 在 Web 上也是 Skia 渲染的，在复杂场景或者动画下，比 Dom 布局性能上更好，更强大（特别是针对动辄上千个 Dom 标签的页面）。

那它在未来上，完全是可以代替各类 UI 组件库，形成全端共用的组件库。any where any use 。

摸索

只能有“摸索”这个词汇，因为是未来的能力，网上的资料只有大会上的宣讲视频，没有官方文档，没有源码解释，甚至官方 Demo 的地址都没有放出来。好在熟悉 Flutter 的套路，最终在 Samples 中里面找到了示例源码（源码传送门）。

分析产物

官方示例地址：flutter-forward-demos.web.app （网络加载慢显示不出来的话，需要翻🧱）

如上图所示，官方 Demo 整体是一个 Web 页面，动画效果和双边相互操作上都极为惊艳，The Future is Coming！

我们打开 Chrome 调试工具，可以看到：

Flutter 就是加载在flutter_target这个<div>上，已经完美的能与 Web 结合在一起了！

再来看看产物大小，这个也是决定这个方案的适用面：

可以看出最大的文件是canvaskit.wasm2.6M，这个是 webassembly 类型的 Skia 渲染文件，虽然大，但可以看出它是通用的，所以说只需要下载一次即可。甚至笔者觉得未来可能会融入到浏览器标准里。

Flutter 的执行文件还是我们的老朋友main.dart.js占用 475KB，不能说小，但确实是在可接受范围内的，毕竟 Flutter for Web 还是有分包手段的。

使用 canvaskit 的方式也会带来字体加载的成本，这个后续再研究，毕竟现在商用的 Flutter for web 都是flutter build web来打包 Web 模式，使用系统字体即可，所以极少有人关心字体加载问题（canvaskit 模式需要给引擎指定字体文件）。

尝试运行

（这个步骤花功夫最多的还是在找源码地址上 - -|||）

源码传送门 可以看到，它连个 README 都没写 ...

下载源码后，是运行不了的，因为大家的 Flutter 版本不够超前，需要切换到试验性版本。

这里就额外安利一个工具：fvm flutter 版本管理器 ，不然来回切换 Flutter 版本就变成一个痛苦的开始。

这工具十分好用，在正确安装后，首先我们执行：

fvm releases 

它会列出所有的 Flutter 版本

我们需要安装的就是 beta 版本的 3.8.0 以上的版本

fvm install 3.8.0-10.1.pre 

执行安装命令，等待安装完成。

执行

fvm list

可以查看我们装过的版本

这之后，在项目里执行

fvm use

选择当前项目需要的版本（这不会影响其他项目使用）。

然后就可以愉快的 pub get 了，但要注意一点，都需要在命令前增加 fvm

fvm flutter pub get

fvm flutter run -d chrome

这样，我们就把官方示例源码跑起来了。

源码解析

加载入口

首先我们要关心是如何把 Flutter 加载到 Web <div> 上去的。

是在 web/index.html 中

与之前的实现不同，是通过 document.querySelector("#flutter_target") 获取到 Dom 对象，再在引擎初始化中指定 hostElement 即可完成加载绑定。

笔者疑惑：

如果一个页面只能加载一个 Flutter <Div>，那这个方案实用性就不大了。

可能是 Demo 本身只是为了演示 embedding 的能力，所以没有实现，或者还在开发过程中？ 按笔者想法，这能力应该要复合 Flutter 多引擎，提供多个 runApp() 入口来绑定是最为合理的。

代码解析

Demo 工程代码很简单，也很惊艳，如大会所说的，JS 这库算是颠覆性设计了。

lib/main.dart

只要增加 @js.JSExport() 注解，能直接把 Flutter 属性/方法开发给 JS 调用

web/js/demo-js-interop.js

这个 appState 是什么？我们可以通过控制台打印看一下：

看出所有的方法都已经注册在 window._appState 上，这个又是怎么实现的呢？

lib/main.dart

关键就是在初始化的时候，用 js_util 做了绑定。

addHandler() 也同理，只不过注册的是一个回调方法来实现的。

至此，JS 与 Flutter 相互操作就已经理解明白了。

---

还有一点比较惊艳的，就是可以控制 CSS 属性来改变 flutter 代码样式，如示例中的那样，可以翻转，倒影等等。

当然是 Flutter 整体改变的方式，如果要改变 Flutter 中某一个组件的样式，可能还是要通过 JS 交互来做。

这个代码也十分简单，比如倒影：

先增加样式文件

css/style.css

按钮触发 class 切换即可 ～

web/js/demo-css-fx.js

后续

本文只是对 Flutter element embedding 能力初探，按 Flutter 的套路，这能力应该在今年 4月 Flutter 4+ 的版本上就会体现出来，所以大家可以兴奋的搓搓手了。

对于笔者来说，它出现的意义更为重大，不仅当下工作上有一个 Web UI 组件库选型的问题，而且可以无代价的 Flutter 多引擎组件库支持成 Web UI 组件库（快捷传送门：从零开始｜构建 Flutter 多引擎渲染组件）。

这条路的坑坑洼洼少不了，目前要解决的问题也很多，需要怀着坚定的决心往前踩才行 ～

---

题外话，本来想每篇文章都继续坚守 iOS 阵地的，但本篇确实只有 Web + Flutter，所以发到前端 ～～

---

感谢阅读，如果对你有用请点个赞 ❤️