Flutter集成到已有iOS工程

前言

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

創建flutter_module

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

  1. 使用Android studio創建
    使用Android studio創建在上一篇新版Flutter集成到已有Android項目中有介紹,這裏不再贅述。
  2. 使用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解決了此問題。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章