iOS项目中接入Flutter

官方文档

创建iOS项目

先创建一个空的iOS项目来模拟已有的项目,取名FlutterAdd。

创建Flutter模块

进入到项目的同一层目录,如图:

cd .../FlutterAdd
flutter create -t module my_flutter

命令执行完成后会创建一个flutter的项目模块,如图:

创建Podfile文件

如果没有安装Cocoapods,需要先自行安装。

如果已正常安装,进入到工程目录:

cd .../FlutterAdd/FlutterAdd

初始化pod的环境:

pod init

此时工程中会出现一个Podfile文件,添加项目依赖的第三方库就在这个文件中配置。

在Podfile文件中最后的位置加上如下两句话:

flutter_application_path = '../my_flutter'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

如下:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'FlutterAdd' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for FlutterAdd

  target 'FlutterAddTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'FlutterAddUITests' do
    inherit! :search_paths
    # Pods for testing
  end

end

#新添加的代码
flutter_application_path = '../my_flutter'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

运行

pod install

将工程关闭,然后点击FlutterAdd.xcworkspace重新打开项目。

在Xcode工程中添加Dart代码的build phase

如下图,在Xcode工程中,选择TARGET -> Build Phases -> +号 -> New Run Script Phase,然后将如下命令粘贴到文本框中,最后通过快捷键⌘B编译:

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

编译完成后,在工程目录中会出现一个Flutter文件夹,如图:

将Flutter文件下的flutter_assets导入到工程中,导入时要选择Create folder references,导入完成后的工程目录:

在主app中使用FlutterViewController

修改AppDelegate.h继承自FlutterAppDelegate:

#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>

@interface AppDelegate : FlutterAppDelegate

@end

修改AppDelegate.m文件:

#import "AppDelegate.h"
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> // Only if you have Flutter Plugins

@interface AppDelegate () @end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [GeneratedPluginRegistrant registerWithRegistry:self];
    return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

在ViewController.m中添加测试代码:

#import "ViewController.h"
#import <Flutter/Flutter.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor lightGrayColor];
    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 {
    FlutterViewController *flutterViewController = [[FlutterViewController alloc] init];
    [self presentViewController:flutterViewController animated:YES completion:nil];
}

@end

运行项目,点击按钮,将会显示如下页面:

热启动/热加载 与 Dart代码调试

进入my_flutter模块,执行如下命令:

cd .../my_flutter
flutter attach

命令完成,会有如下信息显示

Waiting for a connection from Flutter on iPhone XR...

接下来在xcode中启动app,并进入到flutter的页面,此时在控制台(终端)看到如下信息:

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild
state), press "R".
An Observatory debugger and profiler on iPhone Xʀ is available at:
http://127.0.0.1:53132/
For a more detailed help message, press "h". To detach, press "d"; to quit,
press "q".

除了这种方式,也可在Android Studio 中进行 热启动/热加载 操作。

通过Android Studio打开main.dart,如图:

在Android Studio中也有控制台,可进行 热启动/热加载 操作,如图:

接下来我们把热重载打开,在main.dart中随便改一点东西,我们把'You have pushed the button this many times:'中的have删除掉,然后在控制台中输入r,可以看到输出如下内容:

Initializing hot reload...                                       
Reloaded 1 of 419 libraries in 1,400ms.

再看页面,内容已经发生了改变:

到这里就结束了,祝大家工作愉快。

相关链接:
(https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps#ios)
https://tryenough.com/flutter03
https://www.jianshu.com/p/af085d4420fd

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,064评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,606评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,011评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,550评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,465评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,919评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,428评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,075评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,208评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,185评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,191评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,914评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,482评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,585评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,825评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,194评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,703评论 2 339

推荐阅读更多精彩内容