28 | 如何在原生应用中混编Flutter工程？

陈航



该思维导图由 AI 生成，仅供参考

你好，我是陈航。今天，我来和你聊聊如何在原生应用中接入 Flutter。
在前面两篇文章中，我与你分享了如何在 Dart 层引入 Android/iOS 平台特定的能力，来提升 App 的功能体验。
使用 Flutter 从头开始写一个 App，是一件轻松惬意的事情。但，对于成熟产品来说，完全摒弃原有 App 的历史沉淀，而全面转向 Flutter 并不现实。用 Flutter 去统一 iOS/Android 技术栈，把它作为已有原生 App 的扩展能力，通过逐步试验有序推进从而提升终端开发效率，可能才是现阶段 Flutter 最具吸引力的地方。
那么，Flutter 工程与原生工程该如何组织管理？不同平台的 Flutter 工程打包构建产物该如何抽取封装？封装后的产物该如何引入原生工程？原生工程又该如何使用封装后的 Flutter 能力？
这些问题使得在已有原生 App 中接入 Flutter 看似并不是一件容易的事情。那接下来，我就和你介绍下如何在原生 App 中以最自然的方式接入 Flutter。
准备工作既然是要在原生应用中混编 Flutter，相信你一定已经准备好原生应用工程来实施今天的改造了。如果你还没有准备好也没关系，我会以一个最小化的示例和你演示这个改造过程。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文详细介绍了如何在原生应用中混编Flutter工程的步骤和方法。首先介绍了在Xcode与Android Studio中建立基本工程，并对iOS工程进行改造以使用CocoaPods管理。接着，文章介绍了两种在原生应用中嵌入Flutter页面的方式：统一管理模式和三端分离模式。作者指出随着功能迭代的深入，三端代码分离模式逐渐成为主流。在介绍了Flutter混编方案后，文章重点讲解了如何集成Flutter。作者详细介绍了在已有原生工程的情况下，在同级目录创建Flutter模块，并通过命令创建Flutter模块工程。接着，文章分别介绍了Android模块集成和iOS模块集成的步骤，包括对Flutter工程产物的抽取封装和在原生工程中引入Flutter能力。最后，通过示例展示了Android工程接入的过程。整体而言，本文对于想要了解如何在原生应用中接入Flutter的开发者具有一定的参考价值。文章还提到了通过分离Android、iOS和Flutter三端工程，抽离Flutter库和引擎及工程代码为组件库，以Android和iOS平台最常见的aar和pod形式接入原生工程，实现低成本地接入Flutter模块。同时，文章也提到了进一步优化的可能性，即引入CI自动构建框架，实现更优雅的三端分离模式。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Flutter 核心技术与实战》，新⼈⾸单¥59

立即购买

登录后留言

全部留言(53)

最新
精选

Geek_a9f943
如果在flutter中添加了第三方依赖，打包时就会报错，所以这种方式本质上还是不适用于混合开发。最理想的状态是将flutter作为一个单独的项目，然后把最终产物提供给android，ios，这样原生的开发人员也不需要安装flutter运行环境。这一节可以当作是混合开发的预习，希望老师后续能把混合开发讲的更彻底一些，毕竟这才是flutter存在的主要目的
作者回复: Flutter的插件机制只是一层弱依赖，Flutter module并不会关心这堆代码的运行时来源，所以打包并不会顺藤摸瓜携带Native的依赖库。Native的依赖库是需要原生工程去管理的，所以如果你的Flutter module依赖的原生插件有其他的底层依赖库，请依次找到他们，并在原生Android工程中的build.gradle、iOS工程中的Podfile里把原生插件所依赖的原生库也声明为依赖
2019-09-16
2
5
千の星
老师，按照您的混编方法，再 flutter build apk --release，之后生产的aar/assets/flutter_assets/,里面缺少isolate_snapshot_data，isolate_snapshot_instr，vm_snapshot_data，vm_snapshot_instr。aar拷贝到公司nativeapp运行到flutter就会报错：Abort message: '[FATAL:flutter/shell/common/shell.cc(218)] Check failed: vm. Must be able to initialize the VM.。请问是缺少什么环节或者配置吗
作者回复: 参考下这个issue下的解决方案：https://github.com/flutter/flutter/issues/25147 1.flutter clean 2.cd .android 3./gradlew clean 4./gradlew assembleRelease
2019-12-03
2
3
颜为晨
包体积最少会增加多少呢？
作者回复: iOS 15MB左右，安卓5MB左右
2019-09-10

2
许童童
老师，三端分离的话，是要建三个git仓库吗？还是有什么其它的方式管理？
作者回复: 三端工程分别管理，一个工程一个仓库
2019-08-31
2
2
矮个子先生😝
对于flutter module的测试,可以手动添加入口,以IDEA为例,add configurations-> + ->flutter -> name随便取个标识,Dart entrypoint指明入口dart文件,比如main.dart,其他不用管,这样可以边编写flutter时边看效果了
作者回复: 赞
2019-09-04

1
啥玩意儿啊
老师,ios启动后白屏 Engine run configuration was invalid. Could not launch engine with configuration. 是打包环节出现问题了吗
作者回复: 试试 flutter clean flutter build ios --release
2019-12-06
2

八面玲珑
老师，iOS 构建报这个错怎么处理呀 BUILD TARGET Runner OF PROJECT Runner WITH CONFIGURATION Debug === Code Signing Error: No profiles for 'com.****.***' were found: Xcode couldn't find any iOS App Development provisioning profiles matching 'com.lvdingtao.blackHoleModule'. Automatic signing is disabled and unable to generate a profile. To enable automatic signing, pass -allowProvisioningUpdates to xcodebuild.
作者回复: 你需要在runner工程里设置一下iOS开发证书
2019-12-05


17岁码农想当架构师
为什么从安卓原生工程进入flutter页面时先是黑屏一会儿，然后才出来页面？
作者回复: 你换成release再试一次
2019-11-27


谭鹏
Flutter.framework里面没有headers 文件夹 clean了好多遍
作者回复: 打开我给的demo链接里.travis.yml文件，参考里面before_deploy写的脚本执行步骤排查原因
2019-11-21


谭鹏
Flutter build ios 后没有发现app 和 flutter framework
作者回复: 打开我给的demo链接里.travis.yml文件，参考里面before_deploy写的脚本执行步骤排查原因
2019-11-20
2


收起评论