作为一个 iOSer, 所以本篇文章只讲述 iOS 原生嵌入 flutter 相关内容, iOS 原生项目嵌入部分 flutter 页面时, flutter 的部分是以 module 形式作为一个三方库通过 cocoapods 导入到项目中的.

注意: 本文的重点是嵌入Flutter 的相关配置操作, 最终在弹出 flutter 的时候会有点卡顿, 这是因为 Flutter 引擎初始化需要消耗一定的时间, 具体的解决方案请看我的这篇文章 iOS 与 Flutter 通信之 MethodChannel.

0 准备

首先我们在桌面上创建一个 fm 文件夹, 原生项目和flutter_module都放在 fm 文件夹下.

1 创建 flutter_module

1.1 用 Android Studio 创建

用 Android Studio 创建 flutter 项目的时候, 类型选择 Module, 语言分别选择 java 和 OC , 并指定项目位置, 最后点击 finish 按钮完成创建, 如下图所示.

1.2 用 flutter 命令创建

在 fm 目录下, 用如下命令创建 Module:

$ flutter create -i objc -a java -t module flutter_module

1.3 命令参数说明

-i -a : 分别表示 iOS 和 安卓使用的语言, 具体请移步 flutter 创建项目初体验. -t : 表示创建项目的类型, flutter create --help 查看帮助信息, 可以看到说明信息, 默认是 app.

2 创建原生项目

中创建一个原生项目放在 fm 文件夹下, 创建后使用 cocoapods 进行管理, 在 ViewController 中添加一个按钮, 点击按钮的时候弹出flutter页面, 加载页面的代码后边给出来.

这一套流程大家都比较熟悉了, 我就不多说了. 此处要注意的有以下几项

• 我用来测试的手机系统版本是 13.7,
• 原生项目支持的是从 13.0开始, 我就不用删除SceneDelegate相关的东西了,

3 导入 flutter_module

flutter 模块项目和原生项目都准备好了, 那么我们怎么让他们产生联系呢, 如何将 flutter 导入到原生项目中呢, 最常见的方案是使用 cocoapods 导入的方法.

3.1 导入 flutter_module 的配置

在podfile添加导入module代码.

flutter_application_path : 是 module 的绝对路径, 如果 module 的绝对路径变化, 这里也需要更改.

# Uncomment the next line to define a global platform for your project

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

platform :ios, '9.0'

target 'NativeDemo' do
  
  install_all_flutter_pods(flutter_application_path)
  
  use_frameworks!

  # Pods for NativeDemo

end

3.2 导入 flutter_module 模块

原生项目执行 pod install, 导入module 模块, 此时我们看到导入了三个库, 这样就已经将module 模块引入原生项目了, 接下来我们就可以在原生项目中调用 flutter 页面了.

3.3 加载 flutter_module 页面

flutter_module 在创建时系统默认是计数器页面, 创建 app 项目时也是默认的计数器, 所以我们只要将计数器弹出, 并可以正常操作, 就说明我们导入flutter_module配置成功.

我们先来到 ViewController 中, 导入头文件, 添加加载flutter页面的代码, 在点击按钮的时候弹出 flutter 页面.

#import "ViewController.h"

#import <Flutter/Flutter.h>


@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
}

// 弹出 flutter 页面
- (IBAction)pushFlutter:(id)sender {
    
    FlutterViewController *vc = [[FlutterViewController alloc] init];
    [self presentViewController:vc animated:YES completion:nil];
}

@end

项目运行起来后, 点击按钮, flutter 页面就弹出来了, 点击+按钮, 计数器开始工作, 至此, 原生已经成功导入了 flutter module.

总结

主要步骤及注意事项:

1. 创建 flutter_module, 注意语言选择.
2. podfile 配置, 注意flutter_module的绝对路径.