Flutter实战:手把手教你写Flutter Plugin

作者简介 (本文系转载)

本篇来自 **JarvanMo **的投稿,手把手地教大家实战 flutter。一起来看看!希望大家喜欢。

******JarvanMo ******的博客地址:

https://www.jianshu.com/u/cbef229ef5bf

前言

如果你对移动端有所关注,那么你一定会听说过 Flutter。得益于 Google,Flutter 一经推出便得受到了广泛关注。很多开发者跃跃欲试,国内部分大厂,诸如美团、闲鱼等团队已经开始了 Flutter 实践之旅了。笔者也是蹭了一波热度,学习了一下 Flutter。Flutter 虽然真香,但目前社区显然还是很不健全,像微信 SDK、支付宝等第三方 SDK 都无法在 Flutter 项目上直接使用。想要使用这些SDK就曲线救国了。

本文并不探讨如何发布一个 Flutter Plugin,只谈如何实现 Plugin。下面我将以我的开源项目fluwx 为例,手把手教你如何写 Flutter Plugin。

在2018年GDD上,Flutter 分会场演示代码就用到了 Fluwx。

什么是 Flutter Plugin

Flutter Plugin 是一种特殊的包,一个插件包含一个用 Dart 编写的 API 定义,结合 Android和 iOS 的平台特定实现,从而达到二者兼容。
平常我们使用插件可以到这个网站去搜索:

http://pub.dartlang.org/packages

如何与原生进行通信

消息通过 platform channels 在客户端(UI)和主机(platform)之间传递,如下图所示:

image

摘一段官方文档:

在客户端,MethodChannel(API)允许发送与方法调用相对应的消息。 在平台方 面,Android(API)上的MethodChannel和 iOS(API)上的 FlutterMethodChannel启用接收方法调用并发回结果。 这些类允许您使用非常少的“样板”代码开发平台插件。

所谓的客户端是指 Flutter 层,而平台层面则是对应 Android 或者 iOS。至于究竟怎么使用 MethodChannel,我先卖个关子,后面会具体提到。
既然涉及到了 Flutter 与 Android 和 iOS 的通信问题,那么我们一定会有以下几个疑问:

  • MethodChannel 传递的数据支持什么类型?

  • Dart 数据类型与 Android,iOS 类型的对应关系是怎样的?

这两个问题的答案同样来自官方文档:

Dart Android iOS
null null nil (NSNull when nested)
bool java.lang.Boolean NSNumber numberWithBool:
int java.lang.Integer NSNumber numberWithInt:
int if 32 bits not enough java.lang.Long NSNumber numberWithLong:
double java.lang.Double NSNumber numberWithDouble:
String java.lang.String NSString
Uint8List byte[] FlutterStandardTypedData typedDataWithBytes:
Int32List int[] FlutterStandardTypedData typedDataWithInt32:
Int64List long[] FlutterStandardTypedData typedDataWithInt64:
Float64List double[] FlutterStandardTypedData typedDataWithFloat64:
List java.util.ArrayList NSArray
Map java.util.HashMap NSDictionary

至此,我们对Flutter插件有了一个简单了解,下面我们将亲自动手写一个插件。

创建一个 Flutter Plugin 项目

以Android Studio为例(vscode 请用命令行):

image
image

一路 next 就行了。

一个 Flutter Plugin 就创建成功了,项目结构是这样的:

image

我们着重看一下以下三个文件:

  • lib/src/fluwx_class.dart

  • android/src/main/kotlin/com/jarvan/fluwx/FluwxPlugin.kt

  • ios/Classes/FluwxPlugin.m

下面我会继续以 Fluwx 为例逐一讲解每个参数的意义。

MethodChannel 的定义

首先,打开 lib/src/fluwx_class.dart,我们会发现如下代码:

重点来了,我们要实现 Flutter 与 iOS 和 Android 的交互就是通过这个 MethodChannel。MethodChannel 就是我们的信使,负责 dart 和原生代码通信。com.jarvanmo/fluwx 是 MethodChannel 的名字,flutter 通过一个具体的名字能才够在对应平台上找到对应的 MethodChannel,从而实现 flutter 与平台的交互。同样地,我们在对应的平台上也要注册名为 com.jarvanmo/fluwx 的 MethodChannel。

在 Android 上是这样的:

再看 iOS 端:

通过上面几个步骤,我们已经完成了Flutter与原生的桥接工作了,我们继续。

Flutter 调用原生并传递数据

只建立桥接显然是不能够满足我们的需求,我们要通过 Flutter 将数据传递到 android 和iOS 上,进而完成微信的注册。上面我们提供到了 MethodChannel 支持的数据类型及其对应关系,下面我们要在 Flutter 传递一组数据(Map):

register 函数的作用是注册微信,其参数的具体意义不作解释。由示例代码可以看到,我们将传进来的参数重新组装成了 Map 并传递给了 invokeMethod。其中 invokeMethod 函数第一个参数为函数名称,即 registerApp,我们将在原生平台用到这个名字。第二个参数为要传递给原生的数据。我们看一下 invokeMethod 的源码:

很有趣的是,第二个参数是 dynamic 的,那么我们是否可以传递任何数据类型呢?至少语法上是没有错误的,但实际上这是不允许的,只有对应平台的 codec 支持的类型才能进行传递,也就是上文提到的数据类型对应表,这条规则同样适用于返回值,也就是原生给Flutter 传值。请记住这条规定,不再做赘述。

在原生接收 Flutter 传递过来的数据

上面我们将数据通过 Flutter 传递给了原生,我们要原生代码里进行接收与处理,先看Android 的代码:

call.method 是方法名称,我们要通过方法名称比对完成调用匹配。当 call.method == "registerApp" 成立时,说明我们要调用 registerApp,从而进行更多的操作。此时可能会有同学问,如发现 call.method 不存在怎么办?很简单,我们可以通过 result 向 Flutter 报告一下该方法没实现:

当调用这个方法之后,我们会在 Flutter 层收到一个没实现该方法的异常。

iOS 端也是大同小异的:

如果方法不存在:

通过以上步骤我们已经能够接收到 Flutter 的调用了,但是我们的任务还没完成,因为还没取到我们想要的数据。参数 call 携带了由 Flutter 传递过来的数据,在 Android 中其数据放在 call.arguments,其类型为 java.lang.Object,与 Flutter 传递过来数据类型一一对应。如果数据类型是 Map,我们可以通过以下方式取出对应值:

iOS 同理:

当我们取到了 appId 以后,我们就可以进行微信注册了,这里不做叙述。
到这里,我们已经可以完成 Flutter 调用原生并接收数据,从而完成微信注册。但这样做并不能让我们满意,原因有2个:

  • 如何告诉 Flutter 我们的处理结果?

  • 用户总是调皮的,如 appId 是一个空字符串,如何让 Flutterr 抛出一个异常?
    对于这2个问题,我们早就发现在接收 Flutter 调用的时候会传递一个名字 result 的参数,通过 result 我们可以向 Flutter 打小报告,小报告的有三种形式:

  • success,成功

  • error,遇到错误

  • notImplemented,没实现对应方法
    其中 notImplemented,已经说过了。而 success 故名思义,就是处理成功,可以回调一些数据,也可以不回传,调用非常简单:

error 见名思义,报告错误,当我们遇到了一些异常需要回调给 Flutter 时,这个方法就很有用了。调用这个方法会使 Futter 抛出一个异常。先看一下在 Android 上是怎么调用的:

第一个参数是 errorCode(错误代码,虽然叫 Code 但却是一个 String),第二个参数是errorMessage(错误信息),第三个details(详情),这个详情就是错误的具体信息了,当然也可以选择不传。

iOS 对应代码如下:

到目前为止,我们已经完成了一半工作,已经完成了通过 Flutter 实现微信注册,但我们的工作永不止如此,我们还要完成通过原生调用Flutter,从而实现分享,支付等的回调。

注意:分享一个小坑,在 iOS 上,空指针有可能是 nil 或者 NSNull,坑就在这。如果Flutter 传来的 String 是 null,那么在 oc 中对应的是 NSNull,但微信 SDK 的参数可以为nil,却不能为 NSNull。

原生如何调用 Flutter

当我们完成分享时,我们可能需要将分享结果传回 Flutter。有同学可能会说,上面我们已经学习了 Result(FlutterResult),可以通过 result 实现啊。但微信的这些回调是异步的,我们也不能够长期持有Result对象,所以这个时候我们要在原生中调用 Flutter。

原理也一样,在原生代码中,我们也有一个 MethodChannel:

当我们拿到了 MethodChannel,我们就可以搞事情了:

原生调用 Flutter 和 Flutter 调用原生的方式其实是一样的,都是通过 MethodChannel 调用指定名称的方法,并传递数据。那么,Flutter 的接受原生调用的方式和原生接收 Flutter 调用的方式应该也是样的:

稍微不一样的地方就是,在 Flutter 中,我们使用到了 Stream:

当然了不使用 Stream 也可以。通过 Stream,我们可以更轻松地监听回调数据变化:

至此,我们已经完成了微信的注册以及微信回调的回传,剩下的工作是不是可以自己完成啦?

总结

通过本文的学习,我们已经了解了如何亲手编写一个Flutter插件,并且至少掌握以下几点:

  • 创建一个 Flutter Plugin 项目

  • Flutter 调用原生

  • 原生调用 Flutter

  • Flutter 调用原生的结果处理,如成功,错误等

github源码下载地址:

https://github.com/OpenFlutter/fluwx

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

推荐阅读更多精彩内容

  • 早上7:30楼下停车位还很空,就看到一个集团领导在周围有很多空闲停车位且非常好停靠的情况下,停下车,挪走那个“集团...
    脑子天下第一阅读 311评论 0 0
  • 我想过无数次放弃 可心依然跟着你走
    我是你大爷你大爷阅读 133评论 0 0
  • 常量&变量 使用let来定义常量,定义之后不可以修改 使用var来定义变量,定义之后可以修改 注意: 在真实使用过...
    苹果API搬运工阅读 227评论 0 0
  • 张家界市·第一个民俗忆旧餐饮店“印象大庸“于2017年3月25日在官黎坪鸽子花大酒店旁边隆重开业。受创办者张...
    柚桃居士阅读 401评论 0 0