Flutter 产物集成原生 iOS 项目指南 (包含插件)
随着 Flutter 1.5 版本的发布, 越来越多的原生项目开发者开始学习 Flutter, 通过在项目中引入 Flutter 混合开发的方式尝试 Flutter 是一个不错的选择
混合方案
目前混合开发方案有两种集成方式:
源码集成:
谷歌官方提供的方案 https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps,
开发调试方便, 但会产生编译依赖, 所有项目开发者都需要安装 flutter 环境 ,每次编译都会重新生成 flutter 产物, 编译速度会有一定影响
产物集成:
不影响原生项目, 把编译生成的 flutter 产物集成到项目中, Flutter 所有相关内容就只是一个 pod , 添加或移除方便
鉴于源码集成方式依赖性强, 使用产物集成方式是原生项目尝试接入最好的选择, 对原生项目没有任何侵害, 我这边目前的做法是 flutter 开发者通过源码集成方式开一个分支开发相关功能, 而其他成员通过产物集成方式拉取 Pod 即可集成 flutter
这里主要讲讲产物集成的过程包含插件的集成
创建 Flutter 项目
创建 Flutter项目和源码集成,谷歌的教程是相同的
$ flutter create -t modult my_flutter
源码集成和产物集成主要差别是 flutter 生成的产物, 源码集成通过 pod 和 编译脚本在每次编译时生成 flutter 产物自动添加到项目中, 而产物集成是把生成的产物拿出来直接使用
生成 Flutter 产物
在 flutter 项目路径,终端输入 flutter build ios 即可生成产物
$ my_flutter: flutter build ios --debug
$ my_flutter: flutter build ios --release
iOS 项目路径(隐藏文件):
/my_flutter/.ios
如果执行 flutter build ios 失败, 一般是证书问题, 可打开 .ios/Runner.xcworkspace 修复问题, 确保 Runner 可编译通过
执行成功后可看到在 .ios/Flutter 文件中会生成 App.framework 和 Flutter.framework, 这就是生成的 Flutter 产物了
我们可以直接把这两个 framework 拖进原生项目中使用, 无任何侵害的使用 flutter, 但是制作成 pod 是最好的选择, 打包和团队开发都方便, flutter 开发者通过 my_flutter 开发完成后, 执行 flutter build ios 生成产物, 发布到 pod , 其它成员拉取 pod 即可更新
MyFlutterSDK
/MyFlutterSDK
/App.framework
/Flutter.framework
MyFlutterSDK.podspec
集成插件
产物集成的方式集成插件的原生代码是比较麻烦的事情, 源码集成通过脚本会自动添加插件生成 pod, 而产物集成我们需要手动集成插件, 插件的文件目录
/my_flutteer/.ios/Flutter/.symlinks/{插件名称}/ios
插件文件是一个路径映射, 它真正所在的路径在 flutter 库中
$ flutter/.pub-cache/hosted/pub.flutter-io.cn
在 插件文件/ios 中一般会看到 Classes 和 xxx.podspec 两个文件, 我们只需要把它们拿出来单独制作成 pod 即可, 需要注意的是在插件 podspec 中一般会依赖 Flutter
s.dependency 'Flutter'
这里需要把它改成我们自己生成的 pod 名称, 比如上面生成的 MyFlutterSDK
由于包含插件就涉及到插件注册我们还需要把插件注册文件制作成 pod , 路径在
/my_flutteer/.ios/Flutter/FlutterPluginRegistrant
记得更改里面引用的 Flutter 名称
完成制作
至此我们需要的相关文件都制作完成了,包含的 pod 有:
MyFlutterSDK
FlutterPluginRegistrant
插件
插件
...
在原生项目中集成 pod 即可, 需要注意的是 flutter build ios —release 生成的 framework 需要使用真机测试, 因为 debug 和 release flutter 的编译方式是不同的, 我们可以制作两个 pod 针对不同的环境, 比如:
MyFlutterSDK_Debug
MyFlutterSDK_Release
最后放上 Demo, 里面包含了一个插件, 用来演示插件的集成
