iOS、Flutter混合开发中，经常会遇到向已有项目中引入Flutter的情况。为了模拟这种情况下引入Flutter的场景，我会新建一个iOS工程，然后在新的iOS工程中，引入Flutter。
大致步骤如下：
1.新建iOS工程，使用CocoaPods管理工程；
2.新建Flutter Module；
3.iOS接入flutter module；
4.编写测试代码，查看结果;
当然前提是Mac电脑已经配置了Flutter环境变量，并安装了Cocoapods管理工具，这里不详述了，需要的可自行百度。
1、新建iOS工程，使用CocoaPods管理工程
新建文件夹FlutterMixDemo，并在目录下新建Xcode project : ios_app;
启动终端在FlutterMixDemo/ios_app目录下依次执行一下命令：
pod init
pod install
2、新建Flutter Module
打开终端切换到iOS_Flutter_MixBuilder目录下，执行下面命令：
flutter create -t module my_flutter
my_flutter为module的名字，执行完命令等待即可。
创建完成build一下，命令如下：
flutter build ios
如果执行上面的命令出现证书相关错误，也可以使用下方的指令在build的时候选择不签名，命令如下：
flutter build ios --no-codesign
3、iOS接入flutter module
官方给出了三种接入方案，这三种方案各有优缺点，我们先简单看看这三种方案：
使用 CocoaPods 和 Flutter SDK 集成：ios项目中用CocoaPods直接接入管理flutter module。这种方案需要所有开发人员都配置flutter环境，且安装CocoaPods；优点是通过CocoaPods自动集成，配置简单。
在 Xcode 中集成 frameworks：将flutter module先build成FrameWork文件，然后在ios项目中引入文件。这种方案的优点是ios开发人员不需要flutter环境，且项目不需要安装CocoaPods；缺点是每次修改都需要重新build，重新导入。
通过CocoaPods打包Framework：与2类似，只不过在build时加入--cocoapods参数：flutter build ios-framework --cocoapods --xcframework --no-universal --output=some/path/MyApp/Flutter/。打包出来的是Flutter.podspec 文件，ios项目中通过CocoaPods管理集成。这个方案的与2方案差不多，缺点也是每次改动需要重新build，优点是ios开发人员不需要flutter环境。
所以要根据自身的情况来选择符合自己的方案。官方推荐第一种方案，我也尝试了第一个方案，并很顺利的引入了Flutter，如果你想尝试其它两种方式，可以自行百度指引，本文就不多做延伸了。
使用Cocoapods+Flutter SDK引入
先打开上一步创建的iOS项目的podfile文件，并在开头添加上下面的代码：
flutter_application_path = '../my_flutter/'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
post_install do |installer|
flutter_post_install(installer)
end
然后在target中添加：
target 'xxx' do
install_all_flutter_pods(flutter_application_path)
end
修改后的podfile文件如下：
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
flutter_application_path = '../my_flutter/'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
post_install do |installer|
flutter_post_install(installer)
end
target 'ios_app' do
use_frameworks!
install_all_flutter_pods(flutter_application_path)
end
最后终端切换到iOS_Flutter_MixBuilder目录下，执行下面命令：
pod install
CocoaPods会自动将flutter module编辑出的产物集成到ios项目中。如果没有问题，执行⌘+B 编译项目就会成功。
4、编写测试代码，查看结果
我们在ViewController原生controller界面，添加代码实现跳转到Flutter界面FlutterViewController，
#import "ViewController.h"
#import <Flutter/Flutter.h>
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
UILabel *label = [[UILabel alloc]init];
label.textAlignment = NSTextAlignmentCenter;
label.numberOfLines = 0;
label.textColor = [UIColor blackColor];
label.text = @"这是原生界面\n点击跳转Flutter";
[self.view addSubview:label];
CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
label.frame = CGRectMake((screenWidth-200)/2, (screenHeight-40)/2, 200, 60);
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[self jumpToFlutterViewController];
}
- (void)jumpToFlutterViewController {
FlutterViewController *vc = [[FlutterViewController alloc]init];
[self presentViewController:vc animated:YES completion:nil];
}
@end
参考资料：
[稀土掘金]Flutter、iOS混合开发实践
[阿里云开发者社区]Flutter混合开发：在已有iOS项目中引入Flutter（上）
网友评论