iOS已有项目引入Flutter
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(上)