聊聊FlutterEngage大会中的特性落地

做者：闲鱼技术——萧湘

flutter engage大会已通过去一段时间，闲鱼团队做为国内较早大规模使用flutter的团队，对flutter的每一次升级都感到兴奋无比，网上已经有不少介绍大会的flutte 2特性的介绍文章，就不会赘述具体特性，今天会从开发者的角度如何看待以及评论这些新特性，评估这些特性在业务场景应用，最后对flutter将来的展望，未来还有哪些值得期待的功能。

flutter2新特性

全面支持Windows、MacOS、Linux、Web、iOS、Android六大平台

本次flutter engage大会最大的亮点莫过于支持更多平台，在原有移动端的基础上，新增桌面、web端，今后flutter往真正的多平台迈向了更加坚实的一步，flutter2看起来更像全新的引擎。

桌面平台

flutter2全面支持目前主流的Windows、MacOS、Linux桌面平台，其实对于fluttre架构而言，因底层使用skia自己就跨多平台的缘故，从移动端扩展到桌面端是很是顺畅。

优势：

开发者编写一份Dart渲染代码，即可以部署到多个平台，是一个很是流畅的开发方式。

目前存在的问题

除了编写Dart渲染代码外，还须要关注工程所依赖的库是否都完美的支持了桌面版平台。谷歌声称其官方维护全部pub库已经所有支持web/macos/windows等平台，除此外社区其余的库还须要等待做者们升级，要想流畅升级的开发者们可能还须要尚待时日。

想要迁移至桌面平台的开发者们能够自行评估本身的工程所依赖的库。若是依赖的库大部分来自谷歌官方，且都支持了桌面平台，较少平台相关库，升级过程应该是很是顺畅的。

闲鱼观点

相比于业内其余成熟的跨平台桌面开发框架，学习成本比Qt偏小（Dart语言），性能比electron好，但现成的组件没有electron成熟，很是适合工具类的应用从移动端平滑的迁移到桌面端。

flutter web

flutter web最开始的设计思路时使用Dart代码操做css或者Dom接口进行渲染，而到flutter2后已升级为framework和渲染层彻底隔离，使用同一份Dart代码能够编译成多个平台。下面两图是基于操做系统的flutter架构和基于浏览器的flutter架构。

Windows/MacOS/Linux/iOS/Android架构

web架构

flutter web推荐场景

相同一份Dart代码现在能跑在各类平台下了，部署到服务器上也能跑在web端了，那么在上面常见下使用flutter web是最合适的呢?

谷歌推荐使用flutter web的场景有

•Progressive Web Apps(PWA)•Single Page Apps（SPA）•现有app迁移

PWA和SPA是相对于传统web应用而言，传统web网页遵循请求-应答协议，网页内容的刷新和加载伴随着屡次的网络请求。而PWA和SPA相对则会请求少，或者请求时回包的数据。 好比PWA，能够简单理解为这是一种指望运行在各类设备，接近Native应用保持一致体验的使用web应用。简单而言这是在用web技术模拟原生应用，这个应用渲染大部分代码无需网络请求，即开即用，能够无网络时离线运行，和普通原生功能一致，只是这是使用web技术编写，运行在浏览器的应用。常见的例子是安装在android设备的web twitter应用。

而SPA和PWA界限在于，SPA的界面代码第一次须要网络请求，然后每次的请求都是纯数据的请求。PWA应用原理

SPA应用原理

这三种场景使用flutter web的初衷是充分利用它相比传统web网页优越的渲染性能。若是使用flutter web来编写很是经典的web应用则既失去了利用flutter web优越渲染性能，又无法和传统web同样充分利用其成熟的生态。

如何迁移flutter web？

无需配置特别的设置，直接使用IDE（VSCode或者Android Studio）编写flutter 工程后，使用flutter build web便可体验。

但有如下几点须要重点关注：

一、依赖的Flutter plugin需支持web 对于跨平台的plugin，须要从新支持web

二、响应式布局 相对于原有移动设备屏幕小，web端可能会运行在各类屏幕下，各类交互方式须要进行优化。

三、页面跳转/导航 页面的跳转从移动设备的单窗口，变成浏览器下的多窗口，多tab

四、桌面设备交互风格(鼠标、键盘) 支持浏览器下更加经常使用的鼠标键盘等的交互方式

五、渲染模式（HTML/CanvasKit） 须要根据业务需求选择flutter web的渲染方式（HTML渲染方式安装包小，性能较差，CanvasKit渲染方式安装包大，性能好）

目前存在的问题

由于浏览器的特性存在决定了，如要对一些于操做系统强相关的plugin库进行web的特性支持时，会存在困难，好比文件系统，各类社交媒体登陆分享sdk等。所以进一步缩小了其使用的场景。

闲鱼观点：

flutter web的渲染性能虽不如基于操做系统架构的原生flutter应用，但优于能部署在服务器，但又比通常的web渲染性能稍好，因此很是适合对性能在有要求的web活动业务场景中使用。或做为原生flutter界面崩溃时的一种业务降级兜底方案，在紧急场景业务充当救火队员的角色。

支持嵌入式

大会中介绍了丰田公司把flutter迁移到了嵌入式场景，但大会中也没有贴出详细的进展以及相关特性。只能继续期待了。

支持多屏设备

这是微软为将自家设备surface duo设备，开辟一个独立的分支给flutter支持多屏特性。

支持的特性能很好的支持多屏设备的特色，好比：

1.Extended Canvas: 双屏共享一个大canvas2.List-Detail: 左列表，右详情3.Two Page:多页，看书应用4.Dual View:双屏，相同内容不一样角度的双屏5.Companion Pane:左显示，右配置

代码样例：

好比TwoPanel是新增的Widget，panel一、panel2传入两个不一样屏幕的widget

Widget build(BuildContext context) {
   return TwoPane(
      pane1: _widgetA(),
      pane2: _widgetB(),
      paneProportion: 0.3,
      panePriority: MediaQuery.of(context).size.width > 500 ? TwoPanePriority.both : TwoPanePriority.pane1,
   );
}
复制代码

但目前这个分支由微软维护，暂未合入到flutter的主分支中 flutter github中开辟的两个issue在专门跟进 （issue77156[1] ，issue24756[2]） ，感兴趣的能够去到下方连接了解概况 devblogs.microsoft.com/surface-duo… [3]

Dart语言新特性

flutter2中除了新增平台等新特性外，配套的Dart语言也推出新特性

Sound null safety

Sound null safety咱们暂且称为空安全声明，目的是经过显式声明可能为null的变量，增长Dart语言的鲁棒性。 由于Dart语言变量能够存null或者具体的值，所以在平常的开发中可能由于忘记赋值或者变量延迟赋值，致使访问某个变量时为null，致使程序运行时抛出exception。 这个功能推出后，能够从源码级解决null异常致使的错误。 简单的操做是在类型声明后添加？以标识这个变量是能够为null的。

•如何迁移？ 为Dart了这个语法糖，对于已有的项目如何升级?谷歌对此也提供了配套的升级工具，只须要在工程目录下使用dart migrate，就能够帮助你扫描整个工程中潜在的待替换的变量

优势

缓解因变量为null而抛出exception而引起的白屏，用户没法操做等体验问题。

目前存在的问题

可是开发者对于现存工程，一旦Dart代码一会儿所有改造，无疑会增长系统风险，并且对于测试范围也会是很是繁重的任务。

闲鱼观点：

这个特性很好的将风险提早暴露在了编码阶段，又能顺带解决神出鬼没的null问题，性价比很高。但大规模改造也会引来问题，但这个特性非强制性的缘由，为解决大规模改造可能致使的系统性风险，能够采起分批改造的方法进行。

FFI(Foreign Function Interface)

动态库函数调用特性。特性的目的是让开发者更加方便的调用操做系统的动态库。 这个特性其实很早就已经有了，现在正式转正stable，开发者们能够放心使用了。

使用的方式也很是直观

1.编译某个平台下的动态库2.Dart代码中加载动态库，将Dart的函数和动态库的函数绑定3.Dart调用已绑好的函数便可

FFI更多详细看这里pub.dev/packages/ff…

优势

由静态库迁移到动态库后，能够减小安装包大小

相比于注入plugin模式去调用操做系统的接口，FFI更加友好，真正的按需加载，建议对于不经常使用频次少的的系统调用可以使用FFI，对于优化整个engine初始化的加载速度有很好益处。

闲鱼观点： 相对于旧的platform channel这种与C交互而言，FFI因须要动态库加载和符号绑定，性能不占优点，开发者们在选择这两种技术方案时是要权衡的。

社区其余

混合栈的跳转有官方支持了吗？

对于众多团队而言，最初都是由原生的应用引入flutter，因此如何在原生界面和flutter界面跳转变成开发者很是强需求的功能点，flutter boost的推出是为解决混合栈界面跳转而提出的解决方案，但该方案也并不是完美，最大问题在于多个flutter界面跳转时须要多开engine，没法共享engine中相同内存。针对这个问题flutter2中已经支持了engine多实例[4]，但官方也说了，这是一个正式实验中有风险的功能，但官方未提供不一样技术栈之间的跳转方案（iOS/Android->flutter，flutter->iOS/Android），但在官方对于这个问题的技术路线图中也说到，之后这个特性是须要须要继续开发的，但目前仍是建议使用futter boost方案。

多flutter界面技术路线：docs.google.com/document/d/…

细枝末节

除了以上的一些比较大的功能点外，还有一些提高效率小工具

•flutter fix[5]:dart代码分析工具，能高亮废弃代码等•dartPad2.0[6]: 浏览器运行flutter小工程，所见即所得，验证小问题神器•FFI Gen[7]FFI Dart代码生成器，根据C接口批量生产FFI的Dart接口

展望

从做为开发者的角度而言，flutter2扩展了更多的平台，让它在跨平台的路上越走越远。但与此同时，众多平台推出的同时，也会带来更多细枝末节的小问题，小issues，同时从官方的下一步的动做看，接下来将会汇集在支持一个社区中响应度比较大的好几个问题中

•为解决混合栈中内存过大而开发的多引擎实例特性•为解决开发时出现的性能UI调试难的问题，在着力开发devtools工具•dart语言因缺乏命名空间，正在开发的相似特性等等

这些问题咱们也在持续跟进中，若有进一步的进展，咱们也会和你们持续的探讨。 更多flutter相关技术热点，欢迎你们持续关注闲鱼技术。

References

[1] issue77156: github.com/flutter/flu…
[2] issue24756: github.com/flutter/eng…
[3] devblogs.microsoft.com/surface-duo… : devblogs.microsoft.com/surface-duo…
[4] engine多实例: flutter.dev/docs/develo…
[5] flutter fix: flutter.dev/docs/develo…
[6] dartPad2.0: dartpad.dev/flutter
[7] FFI Gen: pub.dev/packages/ff…