本文已参与「新人创造礼」活动，一起敞开创造之路。
我们好，第一次在社区发文章，文笔不好，多多谅解 ～
发这篇文章的原因主要是关于 multiple-flutters Flutter 多引擎的介绍也好，实践也好，可参阅的资源实在太少，包含官方的 issues 也没很多有价值的信息，前几个月确实在坑的泥潭里死去活来。但好在现已走出了一条羊肠小道，可供我们参阅。
关于 Flutter 多引擎的优劣，笔者在这儿不多做介绍，只说最重要的一点：如果有 Native + Flutter 同一页面混合布局的需求（UI 一致性 / 降本增效），但又不能整个 App 或许整个页面替换成 Flutter 的，能够考虑运用 FlutterEngineGroup（multiple-flutters）。
闲话少说，先看作用。
APP 展示
如上图红框处，即为4个不同引擎的 FlutterView，制作在同一个 Native 布局中。
篇幅有限，就不发视频了，有爱好的同学能够下载 “稿定设计” 来看下作用（不过还在 AB 放量阶段，纷歧定能看到新版模版页哈～）。
为什么市道多引擎用的人那么少？
multiple-flutters 绝对是 Flutter 的坑中之王
首要，Flutter 版别至少晋级到 2.10+，才能有初步的 iOS / Android 多引擎同时布局的可用性。 但主张晋级到 Flutter 3+ ，2.5.3 ～ 2.10.5 版别中，iOS 有内存溃散危险，详细原因能够见同事发的这篇 处理 Flutter 引起的 iOS 内存溃散问题。
第一次渡劫进程：
先是接入FlutterEngineGroup 时发现，编译没有问题，但便是死活无法正常显示 FlutterView，翻查了很多材料（也没什么有用的材料），跟 Flutter 官方 Demo 比照等办法，耗时2天，最后只能锁定在 Flutter 版别或许 flutter_boost 的问题上，死马当作活马医，直接硬干晋级 Flutter 到最新版（2.10.2）及相关依赖晋级，发现 Debug 正常了 …
再便是在打包 flutter Android 时又发现， flutter_boost 报错，从 github issues 了解到，flutter_boost 并没去支持 Flutter 2.10.x，且还有闪白屏问题。根据 issues 主张，2.8+版别上存在 Release 包不可用的问题，推荐降低到 2.5.3，这才总算是从 FlutterEngineGroup 初步落地的可行性坑中爬了出来。
由于 2.5.3 同时布局多个 FlutterEngine （3 ～ 10 个不等），导致会产生 ANR 的现象，在寻觅处理方案无果的情况下，测验晋级到当时最新版别 Flutter 2.10.5 ，成果正常了
这在晋级过程中还遇到另一个问题，笔者公司项目里还有很多 flutter_boost 的完成，而 flutter_boost 由于某些原因（能够见他们的 issues） 不支持 Flutter 2.5.3 以上版别。那就还需 Fork 下 flutter_boost 进行修改才可正常运用。
FlutterEngineGroup 离实用太远
- 缺乏内部固定布局办法，只能经过外部布局位置巨细来让 FlutterView 自适应。
- 通讯层极端繁琐，从有限的 Demo 中看出需三端各自完成 Bridge Channel。桥办法经过“字符串”作为对应类型，导致个性化开发维护成本非常高。
- 应用场景狭隘，多 FlutterEngine 间只能经过 Native 交互通讯。
- Flutter Debug 形式下多引擎 = 内存炸裂，要用 Flutter Release 才能够稳定正常到官方描绘的 180K / Engine 的内存占用作用
我们是怎么做的
运用脚本开发了一套 FGUIComponentAPI 东西链来链接 Native 与 Flutter UI 的联系。
- 保证 Flutter 开发无感，关于 Flutter 来说，和通常相同开发 UI，并能够在独立调试中直接验证作用。
- 保证 Native 开发无感，关于 Native 来说，只是直接引证运用源生类，无需关心其间完成，开箱即用。
- 额外的带来的优点便是天然的 UI 单元测试，而且只需 Flutter 一端验证即可。
这儿特别说一下，内置了官方推荐的 pigeon 插件来处理 model 传输的问题，但 pigeon 插件执行起来功率不高，越多的组件执行起来就越慢，所以后面又增加了文件比照跳过的功能来加速。后续考虑替换掉 pigeon，不必 dart 来完成，改用 python 就能处理功率问题。
在开发过程上，笔者运用 YAML 来界说 UI 组件，经过 FGUIComponentAPI 多向生成各类代码及服务。
上图即为主动生成的开发文档，能够看到 Native 调用上是完全无感知的，右侧的预览页面也是天然运用 Flutter 跨端 Web 的能力，直接把 Flutter Example 输出在文档上。
还有多少坑
笔者也还在一步一踩。
比方市道上常见的 pub 也要慎用，特别是有跟 Native 交互的插件，基本上都没有考虑多引擎完成的。 举个例子，常用的 flutter_cache_manager，它由于运用了 sqlite 数据库做存储，在多引擎同时布局的情况下，Android 设备可能会出现数据库等待导致图片缓存写入/读取失败的问题（当然能够经过界说 cachedKey 来指定运用不同的 db 来处理）。这其实也不是第三方库的问题，而是多引擎市道实在运用的人太少的缘故，没有需求就没有市场。
能够看到笔者现已快踩完好个字母表了 … 手动狗头
篇幅有限，这儿不打开说明晰，如果有需求的同学能够下方谈论，人数多的话单独开一篇来介绍怎么优雅的避开其间的坑坑坑坑坑炕钪锟烫烫烫
后续
感谢我们厚爱，会逐渐推出后续更详细的内容
Flutter 多引擎渲染，在稿定 App 的实践（二）：原理篇
Flutter 多引擎渲染，在稿定 App 的实践（三）：躺坑篇
