iOS+Flutter混编

混合开发

一、How

【注】混合开发官方文档_Add Flutter to existing apps

1、安装module，在项目目录下：flutter create -t module flutter_module

看看flutter_module的目录（查看隐藏文件的快捷键：shift+command+.）：

2、在Podfile中添加Flutter依赖

• 生成Podfile文件：pod init
• 修改Podfile文件：

flutter_application_path = ‘…/flutter_module’
eval(File.read(File.join(flutter_application_path, ‘.ios’, ‘Flutter’, ‘podhelper.rb’)), binding)

如下：

• 进行：pod install
  

3、两个项目进行关联

• ① 创建Config文件（引向flutter module）

  • 新建Config目录，分别创建 Flutter.xcconfig 、Debug.xcconfig、Release.xcconfig 三个配置文件
  • Flutter.xcconfig：指向外目录flutter module的Generated.xcconfig 文件路径引用文件
  • 其它：Xcode的环境配置文件

Flutter.xcconfig：

#include "../../flutter_module/.ios/Flutter/Generated.xcconfig"
ENABLE_BITCODE=NO

Debug.xcconfig：

#include "Flutter.xcconfig"

// 原项目由Pod管理，需要添加下面这一项
#include "Pods/Target Support Files/Pods-FlutterHybrid/Pods-FlutterHybrid.debug.xcconfig"

Release.xcconfig：

#include "Flutter.xcconfig"
FLUTTER_BUILD_MODE=release

// 原项目由Pod管理，需要添加下面这一项
#include "Pods/Target Support Files/Pods-FlutterHybrid/Pods-FlutterHybrid.release.xcconfig"

• ② project环境配置选择

• ③ 引入xcode-backend.sh
  

附：flutter 之 ios 脚本 xcode-backend.sh 文件分析

• ④ Run一下我们的工程
  
  可以看到：flutter_module/.ios目录下生成Flutter文件（flutter最终与Native交互的产物）

• ⑤ 添加flutter编译产物

以Create groups方式，添加④中的编译产物；再以Creat folder references方式添加flutter_assets

❗️（这里我看好多文章写了将App.framework中的flutter_assets 删除再以Creat folder references方式添加flutter_assets ）；这里我删除了会出现：Failed to find assets path for "Frameworks/App.framework/flutter_assets"，并且页面空白；所以这里保留着App.framework目录下的flutter_assets

• ⑥ 移除一些不要的文件，最后的目录如下：
  

• ⑦ 看下成果（写个点击方法，测试下）：

- (void)jumpToFlutterVC {
    FlutterViewController *flutterVC = [[FlutterViewController alloc] init];
    flutterVC.title = @"flutterVC";
    [self presentViewController:flutterVC animated:YES completion:nil];
}

二、遇到问题

dyld: Library not loaded: @rpath/App.framework/App

在进行完上述操作之后，run项目报了上面的问题，查看了App.framework/App：

解决：在Embedded Binaries增加App.framework

flutter_module目录

Flutter.framework

参考

1、iOS和flutter混编的，可以看：

• iOS老项目集成Flutter（iOS混编Flutter）

• iOS Native混编Flutter交互实践

2、xcode-backend.sh 文件分析，可以看：

• flutter 之 ios 脚本 xcode-backend.sh 文件分析

3、podhelper.rb分析，可以看：

• Flutter iOS混编方案