如何在iOS中快速集成Flutter

如何在iOS中快速集成Flutter

摘要：

如何快速集成 Flutter 到 原生項目。

集成之後如何使用flutter。

---

一、如何快速集成

集成的方式一般有兩種：手動導入和pods 自動導入。

手動導入就不用多說了直接把相應的framework 拖入項目即可，這種方式是比較笨重的（但也有大神自己寫腳本來實現），我們來說說如何使用pods 快速集成吧。

1、第一步：創建配置文件

我們需要創建三個配置文件：
Debug.xcconfig
Release.xcconfig
Flutter.xcconfig

Debug.xcconfig

#include "Flutter.xcconfig"
#include "Pods/Target Support Files/Pods-你自己的工程名字/Pods-你自己的工程名字.debug.xcconfig"

Release.xcconfig

#include "Flutter.xcconfig"
#include "Pods/Target Support Files/Pods-你自己的工程名字/Pods-你自己的工程名字.debug.xcconfig"

Flutter.xcconfig

#include "../my_flutter/.ios/Flutter/Generated.xcconfig"   // 需要改成你自己的目錄
ENABLE_BITCODE=NO   // 關閉bitecdoe

2、添加配置文件到工程中

PROJECT-->info--->Configurations 配置成之前我們自己創建文件.xcconfig( 有iOS開發經驗的應該都能看得懂)

3、添加編譯flutter的腳本

Target->Build Phases->Run Script 中添加flutter包中工具中的一個工具腳本·xcode_backend.sh。

這個腳本幹了那些事呢，主要有一下幾點：

• 導入Flutter引擎的對應模式版本。
• 編譯Dart代碼爲App.framework。
• 編譯flutter_assets，並內嵌到App.framework。
• 複製資源，並簽名

腳本如下

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

FLUTTER_ROOT 這個變量是在Generated.xcconfig 配置文件中配的，會自動生成，指向的是flutter SDK所在的更目錄。

4、配置PODS profile 文件

先上代碼：

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

use_frameworks!

target 'Runner' do
  install_flutter_engine_pod
  install_flutter_plugin_pods flutter_application_path
end

下面我們來解釋下：

其中非常關鍵的是podhelper 這個文件，在.ios/Flutte/ 目錄下。

這個文件我不做具體解釋，有興趣的可以研究下，

首先是導入這個文件，因爲我們需要使用到裏邊的一些方法。

install_flutter_engine_pod 方法：

其作用很簡單：pod 'Flutter, 就是把Flutter引擎當做一個組件pod 到我們的工程中去。

install_flutter_plugin_pods 方法：

其作用就是把Flutter插件導入到我們項目中去，

在.ios 目錄下所有的Flutte 插件將會生成相對應的pod 組件，在對應的.symlinks 目錄下,通過pod 的方式導入到我們的項目中。

5、pod install 完成集成

最後只需要使用命令：pod install 就可以完成集成工作。

二、如何使用Flutter

這裏做一個簡單的示範例子:

通過 FlutterViewController 來完成從原生到flutter 的跳轉。

FlutterViewController *vc  = [[FlutterViewController alloc] init];
 [vc setInitialRoute:@"FirstView"];
 [self.navigationController pushViewController:vc animated:YES];

其中 FirstView 是一個標識，用於在flutter 中判斷具體跳轉到哪個頁面Widget

void main() {
if(window.defaultRouteName =="FirstView"){
  return runApp(FirstView());
}else if(window.defaultRouteName == "SecondView"){
  return runApp(SecondView());
}else{
  return runApp(FirstView());
}
}

這樣就完成了從原生到flutter 的一個跳轉過程。

但是如果我們在flutter 使用了插件的時候，僅僅這樣是不夠的。

如果使用了插件，在iOS中我們還需要註冊這些插件:

#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>
@interface AppDelegate : FlutterAppDelegate
@property (nonatomic,strong)FlutterEngine *flutterEngine;
@end

#import "AppDelegate.h"
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>

@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];
    [self.flutterEngine runWithEntrypoint:nil];
    [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine]; 
    return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

 FlutterEngine *flutterEngine = ((AppDelegate *)[UIApplication sharedApplication].delegate).flutterEngine;
    FlutterViewController *vc  = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
    [vc setInitialRoute:@"FirstView"];
    [self.navigationController pushViewController:vc animated:YES];