现有iOS项目中嵌入flutter

iOS与flutter混编的一点点分享,配置好flutter环境之后:

1.创建flutter module

先创建一个存放现有项目和flutter模块的文件夹,例如Desktop上创建一个名称Mixed的文件夹,当前iOS项目文件夹名称为MyApp:
a)现有项目和flutter模块都存在,直接clone到Mixed文件夹中
b)在Mixed文件夹中新建一个flutter模块,终端操作如下:

cd ~/Desktop/Mixed/
flutter create --template module my_flutter

my_flutter是flutter模块的名称,自己定义,需要实现的dart代码直接写在lib/文件夹下面

2.嵌入flutter

a)手动嵌入
b)使用CocoaPods嵌入(推荐使用)
反正我使用的CocoaPods,贼简单,手动的话还要去增加一些配置,CocoaPods嵌入过程如下:
目前Mixed中结构应该是这样的,如果不同,则可能需要调整相对路径。

Desktop/Mixed/
├── my_flutter/
│   └── .ios/
│       └── Flutter/
│         └── podhelper.rb
└── MyApp/
    └── Podfile
1.在Podfile中添加:

flutter_application_path = '../my_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb’)

2.对每个需要嵌入flutter的Podfile target添加:

target 'MyApp' do
install_all_flutter_pods(flutter_application_path)
end

3.运行:
pod install

自动生成Debug 和 Release的配置文件
image.png

当你更改了myflutter/pubspec.yaml中的插件依赖项,需要在flutter项目中运行flutter pub get来刷新podhelper.rb脚本读取的插件列表,而且要从/MyApp再次运行pod install

podhelper.rb 脚本把插件、Flutter.frameworkApp.framework添加到你的iOS项目中,Flutter.framework是Flutter engine的包,App.framework是这个项目的编译的Dart代码。

在Xcode打开MyApp.xcworkspace,编译起来。

参考flutter官网

3.iOS和flutter之间的页面跳转

FlutterEngine 充当 Dart VM 和 Flutter 运行时的主机; FlutterViewController依附于 FlutterEngine,给 Flutter 传递 UIKit 的输入事件,并展示被 FlutterEngine 渲染的每一帧画面。

1.创建一个 FlutterEngine:

在 AppDelegate.h:

#import <Flutter/Flutter.h>
@interface AppDelegate : FlutterAppDelegate // More on the FlutterAppDelegate below.
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end

在 AppDelegate.m:

#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> 
#import "AppDelegate.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary<UIApplicationLaunchOptionsKey, id> *)launchOptions {
  self.flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
  // Runs the default Dart entrypoint with a default Flutter route.
  [self.flutterEngine runWithEntrypoint:nil];
  [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine]; // 注册插件
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

注意注册插件的时机,如果任何一个插件库中需要使用到当前某些对象,保证注册插件时对象已存在,否则会导致crash.

2.使用 FlutterEngine 展示 FlutterViewController
我将flutter页面直接设置为APP的首页

FlutterViewController *vc =
         [[FlutterViewController alloc] initWithEngine:self.flutterEngine nibName:nil bundle:nil];
[vc setInitialRoute:@"home"];  // 在flutter中自定义的路由名称
UINavigationController *navi = [[UINavigationController alloc] initWithRootViewController: vc];
self.window.rootViewController = navi;

如果是从某个原生页面跳转flutter的页面,直接

FlutterViewController *flutterViewController =
           [[FlutterViewController alloc] init];
[flutterViewController setInitialRoute:@"/pageA"];
[self.navigationController pushViewController:flutterViewController animated:true];

flutter中main.dart文件是这样的:

class MyApp extends StatelessWidget {

  static BuildContext context=null;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'APP名称',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),

        routes: <String, WidgetBuilder>{
          "/home": (context) => MainPage(),
          "/PageA":(context) => PageA(),
        });
  }
}

3.页面之间的交互
目前我所需要的交互,使用FlutterMethodChannel都可以实现。
flutter中自定义一个方法通道名称,例如

  static const String MethodChannelName = "example.methodChannel";

我从原生很多地方跳转flutter页面,都使用的这一个通道名称

a) flutter调用原生的方法
官方示例:flutter页面需要原生这边获取电池电量,然后在flutter页面展示
flutter中编写:

  static const platform = const MethodChannel(MethodChannelName);

// 调用原生方法,方法名为getBatteryLevel
Future<void> _getBatteryLevel() async {
    String batteryLevel;
    try {
      // result是原生获取到电池电量后传递过来的
      final int result = await platform.invokeMethod('getBatteryLevel');
      batteryLevel = 'Battery level at $result % .';
    } on PlatformException catch (e) {
      batteryLevel = "Failed to get battery level: '${e.message}'.";
    }

    setState(() {
      _batteryLevel = batteryLevel;
    });
  }

然后在页面中显示电池电量

 @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            RaisedButton(
              child: Text('Get Battery Level'),
              onPressed: _getBatteryLevel,
            ),
            Text(_batteryLevel),
          ],
        ),
      ),
    );
  }

flutter中已经完成,然后在iOS创建的FlutterViewController这边添加:

FlutterMethodChannel* batteryChannel = [FlutterMethodChannel
                                          methodChannelWithName:@"example.methodChannel"
                                          binaryMessenger:vc.binaryMessenger];

 __weak typeof(self) weakSelf = self;
[batteryChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
  if ([@"getBatteryLevel" isEqualToString:call.method]) {
    int batteryLevel = [weakSelf getBatteryLevel];

    if (batteryLevel == -1) {
      result([FlutterError errorWithCode:@"UNAVAILABLE"
                                 message:@"Battery info unavailable"
                                 details:nil]);
    } else {
     // 将数据传递给flutter
      result(@(batteryLevel));
    }
  } else {
    result(FlutterMethodNotImplemented);
  }
}];

通道名称example.methodChannel跟flutter那边写的保持一致,vc是上一步中创建的FlutterViewController,getBatteryLevel这个方法名称也跟flutter中的保持一致

// 原生中获取电池电量的方法
- (int)getBatteryLevel {
  UIDevice* device = UIDevice.currentDevice;
  device.batteryMonitoringEnabled = YES;
  if (device.batteryState == UIDeviceBatteryStateUnknown) {
    return -1;
  } else {
    return (int)(device.batteryLevel * 100);
  }
}

这样运行iOS,就完成了。

b) 原生调用flutter的方法
比如说,原生登录之后我要刷新嵌入进来的flutter页面,并把登录成功的用户信息传给flutter模块。
iOS中,先获取到之前创建的方法通道methodChannel,使用invoke直接调用

[methodChannel invokeMethod:@"flutter_login" arguments:@{@"json": [LoginManager account].mj_JSONString}];

flutter中:

MethodChannel _methodChannel;   // 声明方法通道
_methodChannel = MethodChannel("example.methodChannel");
_methodChannel.setMethodCallHandler(_originMethodCallback);
Future<Map<String, String>> _originMethodCallback(MethodCall methodCall) async {
    String methodName = methodCall.method;            // 方法名
    Map params = methodCall.arguments;                // 参数
    Map<String, String> resultMap = Map();            // 返回结果
    switch(methodName) {
      case "flutter_login":      // 登录
        print("Flutter_Login:${params}");
        ...
        // 刷新flutter模块的登录状态和用户信息
        break;
      default:
    }
    return resultMap;
  }

交互的话,我目前只使用了MethodChannel ,欢迎补充指正。

PlatformChannel分为BasicMessageChannelMethodChannel以及EventChannel

BasicMessageChannel: 用于传递数据。Flutter与原生项目的资源是不共享的,可以通过BasicMessageChannel来获取Native项目的图标等资源。
MethodChannel: 传递方法调用。Flutter主动调用Native的方法,并获取相应的返回值。比如获取系统电量,发起Toast等调用系统API,可以通过这个来完成。
EventChannel: 传递事件。这里是Native将事件通知到Flutter。比如Flutter需要监听网络情况,这时候MethodChannel就无法胜任这个需求了。EventChannel可以将Flutter的一个监听交给Native,Native去做网络广播的监听,当收到广播后借助EventChannel调用Flutter注册的监听,完成对Flutter的事件通知。

想具体了解,请参考 (https://www.cnblogs.com/loaderman/p/11353174.html)

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

推荐阅读更多精彩内容