iOS 集成 flutter

flutter

这两年比较火的混合开发的框架,那非 flutter 莫属了。根据朋友出去面试回来的反馈,好多公司现在都要求了解或者会 flutter 开发。

2020 年是特别的一年,我想更是促进了很多公司为了削减成本而选择一种混合开发的框架来开发移动端的 App。毕竟一个前端就能取代一个 Android 和一个 iOS 开发的活,肯定更能受到很多公司的追捧。刚好最近有时间,所以就看了一下 Flutter 相关的内容。

本文主要记录自己在 iOS 原生项目里对接 Flutter 内容记录。因为在整个对接的过程中,踩了一些坑,也找了不少的文章,东边借鉴一些,右边借鉴一些,终于在真机上跑起来了整个项目。

iOS

Flutter Module 集成到 iOS 的中文文档 可以参考一下,下面是自己实际对接的过程中一些主要的步骤。

iOS 项目对接 Flutter

打开 mac 的终端(Terminal)进入到你想创建项目的路径下 cd /Users/xxx/Desktop

1、创建一个 flutter module

1
flutter create -t module module_name

2、构建一下项目,这一步很重要。

1
flutter build ios --debug

3、用 Xcode 创建一个 iOS 项目。

4、将 flutter 项目和 iOS 项目放到同一个文件夹下,如下:

image-20200915181551243

5、修改 Podfile 文件。(本文主要是用 CocoaPods 托管第三方)

1
2
3
4
flutter_application_path = '../job'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

install_all_flutter_pods(flutter_application_path)

如下:

image-20200915181935840

6、安装第三方的内容

1
pod install

7、修改 Appdelegate 文件

1
2
3
4
5
6
7
8
// 修改.h 文件
#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>
@interface AppDelegate : FlutterAppDelegate
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@property(nonatomic, strong) FlutterViewController *vc;
@property(nonatomic, strong) FlutterMethodChannel *batteryChannel;
@end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 修改.m 文件
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>
#import "AppDelegate.h"
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary<UIApplicationLaunchOptionsKey, id> *)launchOptions {
self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter"];
[self.flutterEngine run];
[GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
self.window.rootViewController = [[FlutterViewController alloc] initWithEngine:self.flutterEngine nibName:nil bundle:nil];
self.vc = (FlutterViewController *)self.window.rootViewController;
self.batteryChannel = [FlutterMethodChannel methodChannelWithName:@"BBBBBBB" binaryMessenger:self.vc.binaryMessenger];
__weak typeof(self) weakSelf = self;
[self.batteryChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
//flutter 和 iOS 交互, AAAAA flutter 里 methodChannel invoke 的方法的名称
if ([call.method isEqualToString:@"AAAAA"]) {
//todo 做一些原生上的操作,比较调用原生的界面啥的
// iOS 传值给 flutter
result(@"SSSSSS");
} else {
result(FlutterMethodNotImplemented);
}
}];

return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (void)changeRootVC {
self.window.rootViewController = self.vc;
}
@end

Flutter 里调用 iOS 的写法

1、在 flutter 里定义一下 _methodChannel

1
2
// 和上面的 iOS 初始化 FlutterMethodChannel 要一致
static const _methodChannel = MethodChannel('BBBBBBB');

2、定义一下方法

1
2
3
static Future<String> iosVideo() async {
return await _methodChannel.invokeMethod('video');
}

3、在需要的地方调用一下就行

注意

1、在修改了 flutter 内容之后,调用 iOS 集成 flutter 里的第 2 步,重新构建一下。

2、网上很多说要在 iOS 项目里配置 config 文件,但是在新的 flutter 里,已经不需要了。

3、也不需要在 iOS 项目里配置 run script 了。

4、pod install 之后,build 一下iOS 项目之后,再修改 Appdelegate 文件,不然没有 flutter.frameworkapp.framework

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2020 KNOWLEDGE IS POWER All Rights Reserved.

访客数 : | 访问量 :