flutter嵌入原生组件_Flutter原生混合开发

使用 Flutter 从头开始写一个 App是一件轻松惬意的事情。但是对于成熟产品来说，完全摒弃原有 App 的历史沉淀，全面转向 Flutter 并不现实。用 Flutter 去统一 iOS/Android 技术栈，把它作为已有原生 App 的扩展，然后通过逐步试验有序推进从而提升终端开发效率，可能才是现阶段 Flutter 最有效的集成方式。

那么，Flutter 工程与原生工程该如何组织管理？不同平台的 Flutter 工程打包构建产物该如何抽取封装？封装后的产物该如何引入原生工程？原生工程又该如何使用封装后的 Flutter 能力？

这些问题使得在已有原生 App 中接入 Flutter 看似并不是一件容易的事情。那接下来，我就和你介绍下如何在原生 App 中以最自然的方式接入 Flutter。

准备工作

既然要在原生应用中混编 Flutter，相信你一定已经准备好了原生应用工程。如果你还没有准备好也没关系，我会以一个最小化的示例和你演示这个改造过程。

首先，我们分别用 Xcode 与 Android Studio 快速建立一个只有首页的基本工程，工程名分别为 iOSDemo 与 AndroidDemo。

到此，Android 工程就已经准备好了；而对于 iOS 工程来说，由于基本工程并不支持以组件化的方式管理项目，因此我们还需要多做一步，将其改造成使用 CocoaPods 管理的工程，也就是要在 iOSDemo 根目录下创建一个只有基本信息的 Podfile 文件。Podfile文件的配置如下：

use_frameworks!

platform :ios, '8.0'

target 'iOSDemo' do

#todo

end

然后，在命令行输入 pod install 命令后，会自动生成一个 iOSDemo.xcworkspace 文件，该文件存放的就是我们项目需要的依赖库，这时我们就完成了 iOS 工程改造。

混编方案

如果你想要在已有的原生 App 里嵌入一些 Flutter 页面，有两个办法可以实现，即统一管理模式和三端分离模式。 - 将原生工程作为 Flutter 工程的子工程，由 Flutter 统一管理。这种模式，就是统一管理模式。 - 将 Flutter 工程作为原生工程共用的子模块，维持原有的原生工程管理方式不变。这种模式，就是三端分离模式。

由于 Flutter 早期提供的混编方式能力及相关资料有限，国内较早使用 Flutter 混合开发的团队大多使用的是统一管理模式。但是，随着功能迭代的深入，这种方案的弊端也随之显露，不仅三端(Android、iOS、Flutter)代码耦合严重，相关工具链耗时也随之大幅增长，导致开发效率降低。

所以，后续使用 Flutter 混合开发的团队陆续按照三端代码分离的模式来进行依赖治理，实现了 Flutter 工程的轻量级接入。

除此之外，三端代码分离模式还可以把 Flutter 模块作为原生工程的子模块，从而快速实现 Flutter 功能的“热插拔”，降低原生工程改造的成本。而 Flutter 工程通过 Android Studio 进行管理，无需