第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项目即可。

三、更多混编

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

附：

Previous第二章：原生项目集成FlutterNext第2节：Android项目集成Flutter

Last updated