iOS老项目集成Flutter_Boost

Flutter boost: https://github.com/alibaba/flutter_boost

官方方案:https://flutter.dev/docs/development/add-to-app/

背景简介

新一代Flutter-Native混合解决方案。 FlutterBoost是一个Flutter插件，它可以轻松地为现有原生应用程序提供Flutter混合集成方案。FlutterBoost的理念是将Flutter像Webview那样来使用。在现有应用程序中同时管理Native页面和Flutter页面并非易事。 FlutterBoost帮你处理页面的映射和跳转，你只需关心页面的名字和参数即可（通常可以是URL）。

一：配置flutter sdk版本

官方提示：在继续之前，您需要将Flutter集成到你现有的项目中。flutter sdk 的版本需要 v1.9.1-hotfixes，否则会编译失败.

先去Flutter github查看v1.9.1-hotfixes版本提交记录，这里选择下图的提交记录

flutter v1.9.1

打开终端cd进入到存放flutter sdk目录，执行回退

git reset --hard 68587a0916366e9512a78df22c44163d041dd5f3

然后执行flutter doctor ，等待重新更新下载

备注：这里有个问题，Flutter升级到1.9.x后 ios打包失败 Flutter.framework: Permission denied  这是flutter官方的一个bug，flutter升级到1.10就好了。不升级flutter的情况下，可以改Flutter SDK 的一个文件，flutter/packages/flutter_tools/bin/xcode_backend.sh，打开该文件，第144行RunCommand find"${derived_dir}/engine/Flutter.framework"-type f -exec chmod a-w"{}"\;替换为

RunCommand find"${derived_dir}/engine/Flutter.framework"-type f -iname'.h'-exec chmod a-w"{}"\;

二：创建Flutter module

请确保iOS和Flutter项目的根目录必须在同一目录下

文件结构示例

cd到当前原生项目所在目录，执行：

flutter create -t module flutter_module

如果iOS使用swift语言，请加上 -i swift：

flutter create -i swift -t module flutter_module

等待Flutter module创建完成，用编辑器打开该项目，修改pubspec.yaml文件，添加flutter_boost依赖，此处选择0.1.63为较稳定版本。

pubspec.yaml文件示例

打开Flutter项目 , 获取包：

flutter packages get

至此Flutter项目混编基础配置完成。

三：原生接入Flutter_Boost

打开iOS项目Podfile文件，加入以下代码，用于引入Flutter_Boost相关模块。

  flutter_application_path ='../flutter_module'

  load File.join(flutter_application_path,'.ios','Flutter','podhelper.rb')

  install_all_flutter_pods(flutter_application_path)

Podfile示例

执行pod install，完成后会引入Development Pods模块：

pods结构示例

接下来在Build Setting中把Enable Bitcode改为NO。

在Build Phases里添加运行脚本，好让iOS原生运行时自动打包flutter项目

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

备注：加上这两句脚本后，项目运行有可能会报错，解决方案：

在Flutter module项目中执行flutter clean，执行完之后再执行 flutter build ios --release，生成iOS项目产物，再去iOS项目中尝试编译，即可成功。

下一篇将详细介绍原生与Flutter页面相互跳转的代码配置，如果有问题欢迎留言交流。