Flutter初探--iOS項目集成flutter

本篇為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即可

image.png

修改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)我們的項目.xcworkspacexcodeproj居然不在統(tǒng)一目錄下黄伊,導致項目根目錄在更深層。

解決方案:臨時修改podhelper.rb腳本中的flutter_export_environment_path改為絕對路徑派殷,重新安裝編譯后正常運行还最,該方法只是臨時解決該問題,如有最佳方案歡迎回復毡惜。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末拓轻,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子经伙,更是在濱河造成了極大的恐慌扶叉,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,602評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件帕膜,死亡現(xiàn)場離奇詭異辜梳,居然都是意外死亡,警方通過查閱死者的電腦和手機泳叠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評論 2 382
  • 文/潘曉璐 我一進店門作瞄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人危纫,你說我怎么就攤上這事宗挥。” “怎么了种蝶?”我有些...
    開封第一講書人閱讀 152,878評論 0 344
  • 文/不壞的土叔 我叫張陵契耿,是天一觀的道長。 經(jīng)常有香客問我螃征,道長搪桂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,306評論 1 279
  • 正文 為了忘掉前任盯滚,我火速辦了婚禮踢械,結果婚禮上,老公的妹妹穿的比我還像新娘魄藕。我一直安慰自己内列,他們只是感情好,可當我...
    茶點故事閱讀 64,330評論 5 373
  • 文/花漫 我一把揭開白布背率。 她就那樣靜靜地躺著话瞧,像睡著了一般嫩与。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上交排,一...
    開封第一講書人閱讀 49,071評論 1 285
  • 那天划滋,我揣著相機與錄音,去河邊找鬼埃篓。 笑死处坪,一個胖子當著我的面吹牛,可吹牛的內容都是我干的都许。 我是一名探鬼主播稻薇,決...
    沈念sama閱讀 38,382評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼嫂冻,長吁一口氣:“原來是場噩夢啊……” “哼胶征!你這毒婦竟也來了?” 一聲冷哼從身側響起桨仿,我...
    開封第一講書人閱讀 37,006評論 0 259
  • 序言:老撾萬榮一對情侶失蹤睛低,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后服傍,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體钱雷,經(jīng)...
    沈念sama閱讀 43,512評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡扳抽,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,965評論 2 325
  • 正文 我和宋清朗相戀三年舶沛,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片峰鄙。...
    茶點故事閱讀 38,094評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡灿椅,死狀恐怖套蒂,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情茫蛹,我是刑警寧澤操刀,帶...
    沈念sama閱讀 33,732評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站婴洼,受9級特大地震影響骨坑,放射性物質發(fā)生泄漏。R本人自食惡果不足惜柬采,卻給世界環(huán)境...
    茶點故事閱讀 39,283評論 3 307
  • 文/蒙蒙 一欢唾、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧粉捻,春花似錦匈辱、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽押搪。三九已至,卻和暖如春浅碾,著一層夾襖步出監(jiān)牢的瞬間大州,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評論 1 262
  • 我被黑心中介騙來泰國打工垂谢, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留厦画,地道東北人。 一個月前我還...
    沈念sama閱讀 45,536評論 2 354
  • 正文 我出身青樓滥朱,卻偏偏與公主長得像根暑,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子徙邻,可洞房花燭夜當晚...
    茶點故事閱讀 42,828評論 2 345

推薦閱讀更多精彩內容