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

*本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布

前言

如果你对移动端有所关注，那么你一定会听说过

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的平台特定实现，从而达到二者兼容。

平常我们使用插件可以到这个

网站

去搜索。

如何与原生进行通信？

消息通过platform channels在客户端（UI）和主机（platform）之间传递，如下图所示：

通信机制.png

摘一段官方文档：

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

所谓的客户端是指Flutter层，而平台层面则是对应Android或者iOS。至于究竟怎么使用

MethodChannel

，我先卖个关子，后面会具体提到。

既然涉及到了Flutter与Android和iOS的通信问题，那么我们一定会有以下几个疑问：

MethodChannel传递的数据支持什么类型？
Dart数据类型与Android，iOS类型的对应关系是怎样的？

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

Dart	Android	iOS
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.png

一路

next

就行了。

一个

Flutter Plugin

就创建成功了，项目结构是这样的：

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

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，我们会发现如下代码：

final MethodChannel _channel = const MethodChannel('com.jarvanmo/fluwx');

重点来了，我们要实现

Flutter

与

iOS

和

Android

的交互就是通过这个

MethodChannel

MethodChannel

就是我们的信使，负责

dart

和原生代码通信。com.jarvanmo/fluwx是

MethodChannel

的名字，flutter通过一个具体的名字能才够在对应平台上找到对应的

MethodChannel

，从而实现flutter与平台的交互。同样地，我们在对应的平台上也要注册名为com.jarvanmo/fluwx的

MethodChannel

在

Android

上是这样的：

class FluwxPlugin() : MethodCallHandler {
    companion object {
        @JvmStatic
        fun registerWith(registrar: Registrar): Unit {
            val channel = MethodChannel(registrar.messenger(), "com.jarvanmo/fluwx")
            channel.setMethodCallHandler(FluwxPlugin())
        }
    }
}

再看

iOS

端：

@implementation FluwxPlugin
+ (void)registerWithRegistrar:(NSObject <FlutterPluginRegistrar> *)registrar {
    FlutterMethodChannel *channel = [FlutterMethodChannel
            methodChannelWithName:@"com.jarvanmo/fluwx"
                  binaryMessenger:[registrar messenger]];
    [registrar addMethodCallDelegate:instance channel:channel];
}
@end

通过上面几个步骤，我们已经完成了

Flutter

与原生的桥接工作了，我们继续。

Flutter调用原生并传递数据

只建立桥接显然是不能够满足我们的需求，我们要通过Flutter将数据传递到android和iOS上，进而完成微信的注册。上面我们提供到了

MethodChannel

支持的数据类型及其对应关系，下面我们要在Flutter传递一组数据(Map):

static Future register(
      {String appId,
      bool doOnIOS: true,
      doOnAndroid: true,
      enableMTA: false}) async {
    return await _channel.invokeMethod("registerApp", {
      "appId": appId,
      "iOS": doOnIOS,
      "android": doOnAndroid,
      "enableMTA": enableMTA
    });
  }

register

函数的作用是注册微信，其参数的具体意义不作解释。由示例代码可以看到，我们将传进来的参数重新组装成了Map并传递给了

invokeMethod

。其中

invokeMethod

函数第一个参数为函数名称，即registerApp，我们将在原生平台用到这个名字。第二个参数为要传递给原生的数据。我们看一下

invokeMethod

的源码：

Future<dynamic> invokeMethod(String method, [dynamic arguments]) async {
//some code
}

很有趣的是，第二个参数是

dynamic

的，那么我们是否可以传递任何数据类型呢？至少语法上是没有错误的，但实际上这是不允许的，只有对应平台的

codec

支持的类型才能进行传递，也就是上文提到的数据类型对应表，这条规则同样适用于返回值，也就是原生给Flutter传值。请记住这条规定，不再做赘述。

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

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

Android

的代码：

override fun onMethodCall(call: MethodCall, result: Result): Unit {
        if (call.method == "registerApp") {
            WXAPiHandler.registerApp(call, result)
            return
        }
}

call.method

是方法名称，我们要通过方法名称比对完成调用匹配。当

call.method == "registerApp"

成立时，说明我们要调用

registerApp

，从而进行更多的操作。此时可能会有同学问，如发现

call.method

不存在怎么办？很简单，我们可以通过

result

向Flutter报告一下该方法没实现：

result.notImplemented()

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

iOS端也是大同小异的：

- (void)handleMethodCall:(FlutterMethodCall *)call result:(FlutterResult)result {
    if ([@"registerApp" isEqualToString:call.method]) {
        [_fluwxWXApiHandler registerApp:call result:result];
        return;
    }
}

如果方法不存在：

result(FlutterMethodNotImplemented);

通过以上步骤我们已经能够接收到Flutter的调用了，但是我们的任务还没完成，因为还没取到我们想要的数据。参数

call

携带了由Flutter传递过来的数据，在Android中其数据放在

call.arguments

，其类型为java.lang.Object，与Flutter传递过来数据类型一一对应。如果数据类型是

Map

，我们可以通过以下方式取出对应值：

val appId: String? = call.argument("appId")

iOS同理：

NSString *appId = call.arguments[@"appId"];

当我们取到了appId以后，我们就可以进行微信注册了，这里不做叙述。

到这里，我们已经可以完成Flutter调用原生并接收数据，从而完成微信注册。但这样做并不能让我们满意，原因有2个：

如何告诉Flutter我们的处理结果？
用户总是调皮的，如appId是一个空字符串，如何让Flutterr抛出一个异常？

对于这2个问题，我们早就发现在接收Flutter调用的时候会传递一个名字
result 的参数，通过 result 我们可以向Flutter打小报告，小报告的有三种形式：
success，成功
error,遇到错误
notImplemented,没实现对应方法

其中
notImplemented ，已经说过了。而 success 故名思义，就是处理成功，可以回调一些数据，也可以不回传，调用非常简单：

result.success(mapOf(
                WechatPluginKeys.PLATFORM to WechatPluginKeys.ANDROID,
                WechatPluginKeys.RESULT to registered
        ))

result(@{fluwxKeyPlatform: fluwxKeyIOS, fluwxKeyResult: @(isWeChatRegistered)});

error

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

result.error("invalid app id", "are you sure your app id is correct ?", appId)

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

iOS

对应代码如下：

result([FlutterError errorWithCode:@"invalid app id" message:@"are you sure your app id is correct ? " details:appId]);

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

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

WXMediaMessage *message = [WXMediaMessage messageWithTitle:(title == (id) [NSNull null]) ? nil : title
                                                   Description:(description == (id) [NSNull null]) ? nil : description
                                                        Object:ext
                                                    MessageExt:(messageExt == (id) [NSNull null]) ? nil : messageExt
                                                 MessageAction:(messageAction == (id) [NSNull null]) ? nil : messageAction
                                                    ThumbImage:thumbImage
                                                      MediaTag:(tagName == (id) [NSNull null]) ? nil : tagName];

原生如何调用Flutter

当我们完成分享时，我们可能需要将分享结果传回Flutter。有同学可能会说，上面我们已经学习了

Result

（

FlutterResult

），可以通过result实现啊。但微信的这些回调是异步的，我们也不能够长期持有

Result

对象，所以这个时候我们要在原生中调用

Flutter

原理也一样，在原生代码中，我们也有一个

MethodChannel

：

val channel = MethodChannel(registrar.messenger(), "com.jarvanmo/fluwx")

FlutterMethodChannel *channel = [FlutterMethodChannel
            methodChannelWithName:@"com.jarvanmo/fluwx"
                  binaryMessenger:[registrar messenger]];

当我们拿到了

MethodChannel

，我们就可以搞事情了：

val result = mapOf(
                errStr to response.errStr,
                WechatPluginKeys.TRANSACTION to response.transaction,
                type to response.type,
                errCode to response.errCode,
                openId to response.openId,
                WechatPluginKeys.PLATFORM to WechatPluginKeys.ANDROID
        )

    channel?.invokeMethod("onShareResponse", result)

NSDictionary *result = @{
                description: messageResp.description == nil ?@"":messageResp.description,
                errStr: messageResp.errStr == nil ? @"":messageResp.errStr,
                errCode: @(messageResp.errCode),
                type: messageResp.type == nil ? @2 :@(messageResp.type),
                country: messageResp.country== nil ? @"":messageResp.country,
                lang: messageResp.lang  == nil ? @"":messageResp.lang,
                fluwxKeyPlatform: fluwxKeyIOS
        };
        [methodChannel invokeMethod:@"onShareResponse" arguments:result];

原生调用Flutter和Flutter调用原生的方式其实是一样的，都是通过

MethodChannel

调用指定名称的方法，并传递数据。那么，Flutter的接受原生调用的方式和原生接收Flutter调用的方式应该也是样的：

final MethodChannel _channel = const MethodChannel('com.jarvanmo/fluwx')
  ..setMethodCallHandler(_handler);

Future<dynamic> _handler(MethodCall methodCall) {
  if ("onShareResponse" == methodCall.method) {
    _responseController
        .add(WeChatResponse(methodCall.arguments, WeChatResponseType.SHARE));
  } 
  return Future.value(true);
}

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

StreamController<WeChatResponse> _responseController =
    new StreamController.broadcast();
 Stream<WeChatResponse> get response => _responseController.stream;

当然了不使用

Stream

也可以。通过

Stream

，我们可以更轻松地监听回调数据变化：

_fluwx.response.listen((data) {
    //do something
    });

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

总结

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

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

最后

附上

Fluwx

。同时，OpenFlutter欢迎各位开源爱好者分享自己的作品，邮箱：

[email protected]

。QQ群：892398530。

版本所有，转载请注明

出处

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

前言

什么是Flutter Plugin

如何与原生进行通信？

创建一个Flutter Plugin项目

MethodChannel的定义

Flutter调用原生并传递数据

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

原生如何调用Flutter

总结

最后

继续阅读

Java小案例——随机数猜测随机数猜测

nginx location中斜线的位置的重要性

Android电视机（机顶盒）初次开发的一些经验分享

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的简单使用

neo4j之cypher使用文档

GitHub连夜封杀！这份阿里 10W 字内部 Java 字面试手册到底有多强？

spark/scala关于【资源文件】加载方法概述外部文件加载方案测试资源文件打包入jar包中小结

mybatis_入门程序Mybatis入门

AOP编程_Android优雅权限框架(1)概念基础，2021金三银四前言正文大纲正文

Effective Java 8:通用程序设计

OOM三种类型

工厂模式-三种类型

【递归】高效率求2的n次幂

win10本地scala和spark安装安装scala安装spark

scala (3) Function 和 Method