如何用 Flutter 实现混合开发？闲鱼公开源代码实例

阿里妹导读：具有一定规模的 App 通常有一套成熟通用的基础库，尤其是阿里系 App，一般需要依赖很多体系内的基础库。那么使用 Flutter 重新从头开发 App 的成本和风险都较高。所以在 Native App 进行渐进式迁移是 Flutter 技术在现有 Native App 进行应用的稳健型方式。

今天我们来看看，闲鱼团队如何在这个实践过程中沉淀出一套独具特色的混合技术方案。

现状及思考

闲鱼目前采用的混合方案是共享同一个引擎的方案。这个方案基于这样一个事实：任何时候我们最多只能看到一个页面，当然有些特定的场景你可以看到多个 ViewController ，但是这些特殊场景我们这里不讨论。

我们可以这样简单去理解这个方案：我们把共享的 Flutter View 当成一个画布，然后用一个 Native 的容器作为逻辑的页面。每次在打开一个容器的时候我们通过通信机制通知 Flutter View 绘制成当前的逻辑页面，然后将 Flutter View 放到当前容器里面。

这个方案无法支持同时存在多个平级逻辑页面的情况，因为你在页面切换的时候必须从栈顶去操作，无法再保持状态的同时进行平级切换。举个例子：有两个页面A，B，当前B在栈顶。切换到A需要把B从栈顶 Pop 出去，此时B的状态丢失，如果想切回B，我们只能重新打开B之前页面的状态无法维持住。

如在 pop 的过程当中，可能会把 Flutter 官方的 Dialog 进行误杀。而且基于栈的操作我们依赖对 Flutter 框架的一个属性修改，这让这个方案具有了侵入性的特点。

新一代混合技术方案 FlutterBoost

重构计划

在闲鱼推进 Flutter 化过程当中，更加复杂的页面场景逐渐暴露了老方案的局限性和一些问题。所以我们启动了代号 FlutterBoost（向C++ Boost库致敬）的新混合技术方案。这次新的混合方案我们的主要目标有：

• 可复用通用型混合方案
• 支持更加复杂的混合模式，比如支持主页Tab这种情况
• 无侵入性方案：不再依赖修改 Flutter 的方案
• 支持通用页面生命周期
• 统一明确的设计概念