Flutter开发之《网易新闻客户端Flutter混合开发实践》笔记（52)

摘自：网易新闻客户端Flutter混合开发实践

引言
网易新闻项目本身很庞大，业务繁多，全部改为Flutter实现肯定是不现实的，在使用Flutter的前期阶段，我们挑选了相对独立的几个模块，在现有工程的基础上对其进行Flutter改造，以循序渐进的改造方式保证项目稳健，下面以Android为例，从以下几个方面介绍下此混合开发实践过程：

Flutter集成方式

如上介绍说明，开发者可以使用Flutter开始一个全新的应用，也可以把Flutter作为应用的一个module，把这个module引入到现有的工程中，因此有如下图的两种接入方式：

网易新闻采用上图右所示的方式，以现有工程为主端的Flutter Module的方式集成到现有工程中去，具体集成方法可参考https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps，开发者在lib文件下使用Dart语言编写相应的业务代码。

混合栈及路由

以module的方式接入Flutter, 对于要改造的模块或者页面，在Activity或Fragment的onCreateView中创建FlutterView，Activity或者Fragment为FlutterView的一个容器；另Flutter的framework层提供的navigator管理控制Flutter内部的页面, 如下图中pageWidgetC1，C2，C3的都为Dart实现的flutter页面，而它们是处在同一个Activity中的，因此就有了混合栈的问题（原生栈和Flutter内部栈同时存在）。

对于混合栈路由的处理，如下图左所示，一个Activity里有多个Flutter页面，Flutter之间的跳转切换由Flutter内部栈管理，不过相应的对于页面跳转动画，手势右滑跟随退出等效果也要同原生端效果再实现一套，且需要同Android,iOS原生端现有的保持一致性，但Android,iOS两端现有的本来就是不一致的，因此就有了如下右图所示的第二个方案，一个Activitiy对应一个Flutter页面，路由由原生维护一套，Flutter页面之间的跳转其实是Native的跳转，比如Flutter page1跳转Flutter Page2，需要page1通过约定的消息协议通知到Native，Native收到跳转Flutter页面的协议后会再开启一个承载FlutterView的Activity来绘制Flutter page2页面，但该方案对于跳转层级比较深的页面，多个FlutterView实例对于性能有一定的损耗，因为每个flutterView的底层对应一个engine, 且页面比较隔离，对于数据同步问题要通过native获取，当然对于第一个方案混合路由来说，在原生页面和Flutter页面交替出现的场景下，也同样会存在这些问题。

这两种方案都是可选的，但都不是最优方案，Flutter设计的初衷应该是多以新的纯的Flutter工程为出发点来支持跨平台开发的，对于在现有工程改造的混合开发没有很好的支持，具体采用哪种方案，根据自己项目情况来定，或者更改Flutter的engine来优化内存和数据同步等问题。
网易新闻因为前期选取的改造模块比较独立，一个模块对应一个Activtiy, 该Activtiy里有多个Flutter页面，对于跳转动画，手势右滑跟随退出等效果同Android原生端效果一致，且在统一路由跳转处增加配置项，可切换一对一方案，这样可以保证iOS的接入与原生的交互体验一致性，后续随着越来越多的业务模块改造，对于现有设计方案，我们会不断更新调整优化。

稳定性保证

对于稳定性保证采用如下方案:
选取个别渠道上进行灰度测试；
动态接口开关控制用户逐渐放量测试；
通过FlutterError.onError和runZoned捕获异常，异常错误信息用channel机制通过native上报到崩溃收集系统（fabric-Crashlytics）。
上线情况：网易新闻Flutter用户量由4%逐渐放量到目前10%, 在几个版本的迭代过程中，异常收集达到万分之一，已达到生产标准。