1. 程式人生 > 程式設計 >Flutter整合到已有iOS工程的方法步驟

Flutter整合到已有iOS工程的方法步驟

前言

之前寫過一篇介紹flutter整合到Android工程的文章,這次總結記錄一下自己把flutter整合到iOS的流程,以及遇到的問題以及和解決方法供大家參考。

建立flutter_module

要在iOS工程中整合flutter,首先我們需要建立一個flutter_module,建立的方法有兩種:

使用Android studio建立
使用Android studio建立在上一篇新版Flutter整合到已有Android專案 中有介紹,這裡不再贅述。

使用flutter命令建立
在指定目錄下執行如下命令

flutter create --template module flutter_module

修改Podfile檔案

在Podfile檔案中的依賴部分新增如下內容

flutter_application_path'/Users/liuxinye/Desktop/WorkPro/AppGroup/platforms/xagf_flutter'
load File.join(flutter_application_path,'.ios','Flutter','podhelper.rb')

然後在要整合flutter的target中新增

install_all_flutter_pods(flutter_application_path)

最後為iOS工程執行 pod install 即完成了了flutter_module的整合

使用flutter

接下來我們介紹如何在iOS工程中啟用flutter進行開發

初始化FlutterEngine

首先我們需要在AppDelegate中持有一個FlutterEngine,程式碼如下:

@import Flutter
@interface AppDelegate
@property (strong,nonatomic) FlutterEngine *flutterEngine;
@end

然後我們需要在適當的時機啟動 FlutterEngine

+(FlutterEngine *)initFlutter:(NSString*)entry :(NSString*)dartFile{
   FlutterEngine *flutterEngine =
     ((AppDelegate *)UIApplication.sharedApplication.delegate).flutterEngine;
  if (flutterEngine) {
    return flutterEngine;
  }else{
    flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
    if(dartFile&&entry){
      //指定dartFile檔案中entry方法啟動flutter
      [flutterEngine runWithEntrypoint:entry libraryURI:dartFile];
    }else if (entry){
      //指定main.dart中方法名為entry的方法啟動
      [flutterEngine runWithEntrypoint:entry];
    }else{
      //執行預設的main.dart檔案中的main方法進行啟動
      [flutterEngine run];
    }
    return flutterEngine;
  }
}

這裡涉及了三個Flutter的啟動方式,三種方式的區別在程式碼中給出了註釋。

當然,我們也可以在啟動flutter時初始化路由。

[[flutterEngine navigationChannel] invokeMethod:@"setInitialRoute"
                     arguments:@"/index"];

至此我們就完成了 FlutterEngine 的啟動工作,接下來我們來建立用來顯示Flutter介面的 ViewContoller 。

建立FlutterViewController

[GeneratedPluginRegistrant registerWithRegistry:flutterEngine];
FlutterViewController *flutterViewController =
    [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];

以UIView的方式使用

如果想要以 UIView 的方式使用,只需要使用 UIView *myFlutterView=flutterViewController.view 即可。

遇到的問題

此次整合Flutter到iOS工程還是比較順利的,我在整合過程中只遇到了一個問題,在完成以上整合工作後執行iOS工程,出現了找不到 lib/main.dart 的報錯,我百度了很久無法解決,最後嘗試關閉xcode,刪除 Pods 資料夾和 Podfile.lock 檔案重新執行 pod install 解決了此問題。

到此這篇關於Flutter整合到已有iOS工程的方法步驟的文章就介紹到這了,更多相關Flutter整合到已有iOS 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!