一、混合开发场景
原生页面可以打开Flutter页面
Flutter页面可以打开原生页面
二、Flutter混合开发的集成步骤（以数据大脑项目为例）
1.创建Flutter Module
在做混合开发之前，我们首先需要创建一个Flutter Module。
这里建议Flutter Module的创建目录和原生工程的目录同级。假设Native的目录是这样的：xxx/Native项目。
cd xxx/
flutter create -t module flutter_module
可以看到生成的flutter_module目录下有这些文件：
README.md pubspec.lock
flutter_module.iml pubspec.yaml
flutter_module_android.iml test
.android lib .ios
上面的.android和.ios目录，是隐藏文件， 也是这个flutter_module的宿主工程。因为有宿主工程的存在，这个flutter_module在不添加额外配置的情况下是可以独立运行的：
.android：flutter_module的Android宿主工程；
.ios：flutter_module的iOS宿主工程；
lib：flutter_module的Dart部分的代码；
pubspec.yaml：flutter_module的项目依赖配置文件。
2.为已存在的iOS原生项目添加Flutter Module依赖
2.1.在Podfile文件中添加依赖：
flutter_application_path = "../flutter_module"
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
如下图
17_05_16__08_22_2019.jpg
2.2.安装依赖：
在项目的根目录中，执行如下指令：
pod install
2.3.禁用Bitcode：
目前Flutter还不支持Bitcode，所以集成了Flutter的iOS项目需要禁用Bitcode。
992921-20190527115015687-1831269676.png
2.4.添加Build Phase来构建Dart代码
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
添加完之后，要将这个Run Script拖动到Target Dependencies phase下面，接下来就可以运行项目了
脚本.png
以下为集成踩坑记录
踩坑1. 此时运行项目如果报以下错误
17_22_23__08_22_2019.jpg
解决方案：Build Settings → User-Defined , Add User-Defined Setting，创建FLUTTER_ROOT ,将你的Flutter SDK路径写入即可
屏幕快照 2019-08-22 下午5.25.40.png
添加完成之后
屏幕快照 2019-08-22 下午5.29.00.png
踩坑2.项目成功编译后，正常会生成Flutter.framework 和 App.framework ,如果没有生成，需要手动拖入到工程中，文件路径如下图：
屏幕快照 2019-08-22 下午5.42.55.png
屏幕快照 2019-08-22 下午5.43.25.png
拖入到工程中，此处注意选择 Create groups
屏幕快照 2019-08-22 下午5.46.15.png
踩坑3.如果遇到以下崩溃问题
屏幕快照 2019-08-22 下午5.39.05.png
解决方案 选中TARGETS → General → Embedded Binaries 添加 App.framework 和 Flutter.framework
如下图：
屏幕快照 2019-08-22 下午5.49.28.png
网友评论