让Flutter应用程序可以移植网页平台

Google发布了一个实验性项目Hummingbird,要让Google的UI工具包Flutter也能在网页上执行。虽然受限于网页浏览器沙盒化网页应用程序,限制了部分功能,但是Flutter网页引擎仍提供了Flutter引擎包括小工具与布局等多数的功能。Google预计在Hummingbird代码稳定后,便会在GitHub上开源。

Flutter的版图已经从原本的移动设备操作系统扩散,朝全平台发展,Google正在进行的Flutter Desktop Embedding项目,虽然还在早期阶段,但目标是要将Flutter带上三大桌面操作系统,另外,Google也在树莓派上测试Flutter,以展示对于不完整桌面的嵌入支持方法。而Google同时也发布了实验性项目Hummingbird,尝试在网页上执行Flutter。

Flutter是一个多层系统,对开发者来说,越高层越容易使用,并能以很少的代码,完成很多工作,而低层的系统虽然比较复杂,但是却赋给开发者更多的控制能力。开发者可以访问Flutter引擎以上每一层的系统,当高层所提供的控制力不足时,便可以使用较低层的系统。Flutter引擎以最低端的函数库dart:ui向外开放功能,该函数库能够完全的控制小工具(Widgets)、物理、动画和布局,把这些元素组合到屏幕中成为像素。

要让Flutter在网页上执行,Google提到,有三件事情要做,第一需要编译Dart代码,因为Flutter是用Dart编写的,要让Flutter在网页上执行,就需要在网页上执行Dart。再来,便是选择要在网页上执行的Flutter子集,Flutter中有许多代码是专用于特定平台,对于网页平台无用。第三件事,选择足够的网页功能子集,Google提到,随着发展网页平台会累加功能产生新功能,像是开发者能使用HTML+CSS、SVG、Canvas和WebGL搭建图形。Google表示,决定支持特定Flutter系统层,便决定了要用的网页技术。

最初Google制作了三个层次的原型,包括只支持小工具、小工具加上自定义布局以及Flutter网页引擎。最后Google留下了第三种原型Flutter网页引擎,该原型保留了dart:ui之上的所有层,并提供了在浏览器中运行的dart:ui实例。Google认为,Flutter最有价值的功能之一,便是可以跨平台移植,允许使用单一代码库,编写多个平台的应用程序。Flutter网页引擎设计原型提供平台间,最高等级的程序码重用。

以基于Flutter网页引擎开发的应用程序,具有良好的互操作性。Flutter网页应用程序可以完全调用现存网页上的所有Dart函数库,而且也完全支持Dart与JavaScript互相操作套件,包括package:js与dart:js。不过,Google表示,应该避免在Flutter中使用CSS,在页面中任意使用CSS可能会导致Flutter不可预测的行为,且由于在设计时,Flutter需要在呈现画面时知道所有布局属性,但由于运行方式的限制,CSS的对Flutter来说就像黑盒子一般不可知。另外,为了保持Flutter代码跨平台可移植性,避免使用CSS,还可以在Android和iOS上执行相同的代码。

目前Flutter还不支持嵌入现有的网页应用程序中,Google正在研究要以<iframe>或shadow DOM的方式加入支持。而Google也尚未提供非Flutter组件嵌入Flutter网页应用程序的支持,但这项需求正在讨论中,在未来可能会增加。

Google提到,虽然他们的目标是要尽可能的把Flutter移植到网页上,但并不代表Flutter应用程序移植到网页上不需要修改代码,因为Flutter网页应用程序仍是网页应用程序,在浏览器被沙盒化,只能执行网页浏览器允许的操作,因此当Flutter应用程序带有像是ARCore的本机插件,必定无法在网页上执行,同样地,也没办法直接访问文件系统或是低端网络权限。

Hummingbird中已经构建了网页引擎来渲染大部分的Flutter Gallery,所有Material小工具、Material Theming,以及Shrine和Contact Profile已经都可以在网页上执行,只剩下iOS小工具Cupertino尚未移植。Google将在代码稳定后,在GitHub上开源Hummingbird项目。