第1节：iOS项目集成Flutter

本节学习内容：在已有的iOS项目中集成Flutter，以使得您的iOS项目中的部分界面/功能可以通过Flutter来实现。

本节学习用时：30分钟

本节学习方式：动手实践

---

本节目录：

一、集成方式介绍

二、集成方法一：手动配置iOS与Flutter的混编环境

三、集成方法二：Pod集成Flutter方式

四、集成后调用Flutter界面的代码编写

---

一、集成方式介绍

本节将介绍两种在已有的iOS项目中集成Flutter的方法，分别为①手动配置iOS与Flutter的混编环境、②Pod集成Flutter方式。

下面表格是两种集成Flutter的方法比较：

	手动集成Flutter	Pod集成Flutter
集成速度	需要自己建立文件、进行相应配置，并替换	执行Pod及Run Script即可
Flutter项目更新时	每次都需要替换	不用替换
Flutter项目与iOS同时路径变更时	不影响iOS工程	Flutter工程需要重新编译执行； 然后iOS工程需再重新执行Pod

二、集成方法一：手动配置iOS与Flutter的混编环境

1.1 集成后的最后项目结构如图：

1.2 集成后的最后文件结构如图：

1.3 详细的集成实现步骤如下：

• ①、通过终端命令在指定目录(这里我们选择iOS项目的同级目录)创建myfluttermodule。flutter create -t module myfluttermodule

• ②、Xcode：创建iOS项目，设为myiosproject；

• ③、Xcode：创建配置衔接文件

  • 在②中建立的iOS项目中新建Config目录，用于存放/管理接下来Xcode工程需要创建的的配置衔接文件；

  • 选择创建Configuration Settings File文件，分别创建名为 Flutter.xcconfig、Debug.xcconfig、Release.xcconfig的三个配置文件；

    

  • 完善Flutter.xcconfig、Debug.xcconfig、Release.xcconfig三个配置文件的内容为分别如下：

    Flutter.xcconfig 配置文件内容如下：

    > //Flutter.xconfig,用于指向外目录flutter module的`Generated.xcconfig`文件路径引用文件
    > 
    > //这里填写前面建立的 myfluttermodule 的Generated.xcconfig的路径
    > #include "../../myfluttermodule/.ios/Flutter/Generated.xcconfig"
    > ENABLE_BITCODE=NO
    >

    Debug.xcconfig 配置文件内容如下：

    > //Debug.xconfig，Xcode的环境配置文件
    > 
    > #include "Flutter.xcconfig"
    > //#include "../Pods/Target Support Files/******.debug.xcconfig"//pod路径
    > #include "../Pods/Target Support Files/Pods-myiosproject/Pods-myiosproject.debug.xcconfig"//pod路径
    > FLUTTER_BUILD_MODE=debug
    >

    Release.xcconfig 配置文件内容如下：

    > //Release.xconfig，Xcode的环境配置文件
    > 
    > #include "Flutter.xcconfig"
    > //#include "../Pods/Target Support Files/******.release.xcconfig"//pod路径
    > #include "../Pods/Target Support Files/Pods-myiosproject/Pods-myiosproject.release.xcconfig"//pod路径
    > FLUTTER_BUILD_MODE=release
    >

  • 修改Xcode Project的环境配置选择

    

• ④、Xcode -> Target -> Build Phases -> New Run Script Phase，添加要执行的脚本内容引入xcode-backend.sh，此步很重要。

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

  

• ⑤、添加/替换flutter编译产物，如果之前已添加，则这里每次有有新的时候，注意要替换掉，否则界面还是旧的。

  即复制 myfluttermodule/.ios/Flutter下的App.framework、engine、flutter_assets进行替换。

  然后Xcode重新编译即可。

  注意：flutter_assets 并不能使用Create groups 的方式添加，只能使用Creat folder references 的方式添加进Xcode项目内，否则跳转flutter会页面渲染失败（页面空白）。

• ⑥、至此，恭喜你，到这里您可向往常一样直接执行已集成Flutter的Xcode项目了。

三、集成方法二：Pod集成Flutter方式

2.1 最后的项目结构如图：

2.2 实现步骤如下：

• ①、通过终端命令在指定目录(这里我们选择iOS项目的同级目录)创建myfluttermodule。flutter create -t module myfluttermodule。这里因为我们已经在1中实现，所以不再重复创建。

• ②、Xcode：创建myiosproject2；添加如Podfile，及在Podfile中如结构图中所示，补充

  flutter_application_path = './../myfluttermodule/'
  eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

  后，执行pod install

  

• ③、Xcode -> Target -> Build Phases -> New Run Script Phase，添加要执行的脚本内容引入xcode-backend.sh，此步很重要。同1中一样的做法。

• ④、至此，混编环境配置成功！

四、集成后调用Flutter界面的代码编写

#import "AppDelegate.h"
#import <Flutter/Flutter.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
//    ViewController *viewController = [[ViewController alloc] init];
//    UIViewController *rootViewController = [[UINavigationController alloc] initWithRootViewController:viewController];
    UIViewController *rootViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
    self.window.rootViewController = rootViewController;
    [self.window makeKeyAndVisible];
    
    return YES;
}

而后，正常执行Xcode项目即可。

三、更多混编

更多混编知识，请查看官网：使用平台通道编写平台特定的代码

附：