一、混合开发场景
原生页面可以打开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