如何在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];