本篇為iOS集成flutter學習總結罩扇,由flutter官方提供的最新集成方案翻譯而來。本篇以OC項目為示例,Swift項目和Android項目可查看《flutter官方提供的集成方案》
創(chuàng)建flutter module
假設我們已經(jīng)有了一個iOS項目验靡,路徑為 some/path/MyApp,那我們要在同級目錄下創(chuàng)建 flutter module
$ cd some/path/
$ flutter create -t module my_flutter
創(chuàng)建完成后雏节,目錄結構大致如下胜嗓。如果目錄結構不一樣或者已存在.xcconfig
,你可以重用,但是需要調整相對路徑钩乍。
some/path/
my_flutter/
lib/main.dart
.ios/
MyApp/
MyApp/
AppDelegate.h
AppDelegate.m (or swift)
:
配置Podfile
集成flutter需要用到CocoaPods進行依賴管理兼蕊,因為flutter項目會用到很多第三方插件。
如果你的flutter模塊是在2019.7.30
之前集成的件蚕,或者flutter --version
小于Flutter 1.8.4-pre.21
,需要升級flutter環(huán)境孙技,并確保環(huán)境在 master channel 上才能按下邊方式進行配置。
1.配置路徑
flutter_application_path = 'path/to/my_flutter/'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
2.給需要用到flutter的Target添加 install_all_flutter_pods(flutter_application_path)
target 'MyApp' do
install_all_flutter_pods(flutter_application_path)
end
target 'MyAppTests' do
install_all_flutter_pods(flutter_application_path)
end
3.執(zhí)行pod install
若修改了 some/path/my_flutter/pubspec.yaml 的依賴配置時排作,需要執(zhí)行flutter packages get
來從podhelper.rb
文件中讀取依賴的插件列表牵啦,并更新依賴插件。更新完成后需要重新執(zhí)行pod install
podhelper.rb
是一個ruby腳本妄痪,存放在隱藏目錄.ios/Flutter/podhelper.rb下,主要作用是確保 plugins哈雏、Flutter.framework、App.framework嵌入到項目中。
禁用BitCode
flutter不支持bitcode
,所以在項目中要設置ENABLE_BITCODE
為NO,選擇對應Target ,然后找到Build Settings->Build Options->Enable Bitcode改為NO即可
修改AppDelegate
AppDelegate.h:
@import UIKit;
@import Flutter;
@interface AppDelegate : FlutterAppDelegate
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end
AppDelegate.m
@import FlutterPluginRegistrant; // Only if you have Flutter Plugins
#import "AppDelegate.h"
@implementation AppDelegate
// This override can be omitted if you do not have any Flutter Plugins.
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];
[self.flutterEngine runWithEntrypoint:nil];
[GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
代碼示例:
ViewController.m
#import "AppDelegate.h"
#import "ViewController.h"
@import Flutter;
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self
action:@selector(handleButtonAction)
forControlEvents:UIControlEventTouchUpInside];
[button setTitle:@"Press me" forState:UIControlStateNormal];
[button setBackgroundColor:[UIColor blueColor]];
button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
[self.view addSubview:button];
}
- (void)handleButtonAction {
FlutterEngine *flutterEngine = [(AppDelegate *)[[UIApplication sharedApplication] delegate] flutterEngine];
FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
[self presentViewController:flutterViewController animated:false completion:nil];
}
@end
遇到問題
/Users/XXX/Library/Developer/Xcode/DerivedData/ProjectName-cejmlibicqxhyohdriqdcchfxddj/Build/Intermediates.noindex/ProjectName.build/Debug-iphoneos/TargetName.build/Script-9C822F4939986DB4F2DD1121.sh: line 4: /Users/XXX/Desktop/Code/oa/../my_flutter/.ios/Flutter/flutter_export_environment.sh: No such file or directory
從問題上可以看出flutter_export_environment.sh
文件在對應路徑下找不到裳瘪,flutter_export_environment.sh
其實與podhelper.rb
在同一目錄下土浸,然后打開podhelper.rb
可以看到 flutter_export_environment.sh的文件路徑是由iOS項目根目錄,相對路徑和文件名拼接而成的彭羹。
flutter_export_environment_path = File.join('${SRCROOT}', relative, 'flutter_export_environment.sh');
script_phase :name => 'Run Flutter Build Script',
:script => "set -e\nset -u\nsource \"#{flutter_export_environment_path}\"\n\"$FLUTTER_ROOT\"/packages/flutter_tools/bin/xcode_backend.sh build",
:input_files => [
File.join('${SRCROOT}', flutter_application_path, '.metadata'),
File.join('${SRCROOT}', relative, 'App.framework', 'App'),
File.join('${SRCROOT}', relative, 'engine', 'Flutter.framework', 'Flutter'),
flutter_export_environment_path
],
:execution_position => :before_compile
原因:最終發(fā)現(xiàn)我們的項目.xcworkspace
和xcodeproj
居然不在統(tǒng)一目錄下黄伊,導致項目根目錄在更深層。
解決方案:臨時修改podhelper.rb
腳本中的flutter_export_environment_path改為絕對路徑派殷,重新安裝編譯后正常運行还最,該方法只是臨時解決該問題,如有最佳方案歡迎回復毡惜。