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混編方案