如何为已上架iOS/Android原生应用集成Flutter模块并嵌入TabViewController

前置基础准备 #

• 先在现有原生工程目录同级位置，通过flutter create --template module flutter_hybrid_module 命令生成可被原生嵌入的Flutter业务模块，不单独做成独立App工程，方便后续迭代时直接打包产物嵌入现有原生包体。
• 分别在iOS工程的Podfile、Android工程的模块build.gradle中，以本地源码依赖的方式引入上述Flutter模块，保证原生工程可以正常编译、识别Flutter侧的Dart代码产物。
• 提前搭建Flutter引擎缓存池，预热2-3个常驻FlutterEngine实例，避免每次打开Flutter页面都新建引擎导致的几秒白屏卡顿，保证跳转体验和原生页面一致。

核心需求实现 #

需求1：Flutter页面作为TabBar容器下的独立标签页 #

iOS端实现

• 为这个Tab位置对应的Flutter页面，单独绑定一个提前预热好的FlutterEngine实例，把引擎的初始路由配置为该Tab对应的Flutter页面路径，比如/tab_flutter_entry。
• 不直接把系统提供的FlutterViewController硬塞进TabBarController的子控制器数组，而是做一层轻量的原生容器VC，内部持有FlutterViewController的实例；把容器VC的viewWillAppear/viewDidDisappear/viewWillLayoutSubviews等全量生命周期方法，同步转发给内部的FlutterViewController，避免生命周期错乱导致的页面黑屏、内存泄漏。
• 最终把这个容器VC直接加入TabBarController的viewControllers列表，作为和其他原生标签完全平等的独立Tab存在，交互逻辑、切换动画都和原生Tab保持一致。

Android端实现

• 对应Tab的Fragment位置，单独绑定一个预热完成的FlutterEngine实例，把引擎的初始路由配置为该Flutter Tab的页面路径。
• 通过FlutterFragment.withCachedEngine(引擎ID) 方式构建绑定了对应引擎的Fragment，把这个Fragment直接加入TabLayout对应的Fragment切换列表，和其他原生Fragment的切换逻辑完全打通。
• 做好Fragment显隐状态和Flutter页面的状态同步，避免切Tab回来后Flutter页面出现状态重置、渲染异常的问题。

需求2：点击按钮拉起指定Flutter模块/页面 #

• 先和Flutter侧约定好全量可被拉起的路由映射表，比如/order_list、/member_setting等明确的页面路径标识，原生端不需要知道Flutter内部的页面结构，只需要传对应路由标识即可。

iOS端实现

• 按钮点击事件触发后，从Flutter引擎缓存池中取出通用的跳转引擎实例，配置好目标路由路径，初始化FlutterViewController。
• 需要传递业务参数的场景，把参数序列化后通过引擎的初始路由参数携带，或者通过约定好的MethodChannel把参数同步给Flutter侧，由Flutter侧接收参数后渲染对应页面。
• 把初始化好的FlutterViewController直接push到当前原生的UINavigationController栈中即可，Flutter页面的返回动作通过MethodChannel通知原生VC执行pop操作，让跳转链路完全融入原生导航栈。

Android端实现

• 按钮点击事件触发后，从Flutter引擎缓存池中取出可用实例，通过FlutterActivity.withCachedEngine(引擎ID) 构建对应的Flutter启动页，把目标路由作为参数传入，直接拉起这个Activity即可。
• 参数传递、返回逻辑的实现和iOS端保持一致，双端的交互体验和原生页面跳转没有差异。

落地避坑要点 #

• 不要用单引擎承载所有页面：如果让单个FlutterEngine同时承载Tab页和普通跳转页面，很容易出现页面栈混乱、Tab状态错乱的问题，需要根据页面独立性拆分多引擎缓存，比如Tab页绑定独立引擎，普通跳转的Flutter页复用通用引擎池。
• 生命周期转发必须做全：不管是前后台切换、页面显隐，所有原生层的生命周期事件都要完整转发给Flutter层，否则会出现Flutter页面的计时器、定位、视频播放等能力异常失效。
• 栈状态要由原生层统一管控：不要在Flutter侧维护独立的页面栈，所有的页面push、pop动作都要通过通道同步给原生层，保证原生导航栈的状态一致性，避免出现返回键按到底时页面错乱的问题。

内容的提问来源于stack exchange，提问作者Kevv Keka