Flutter与原生通信 - Flutter Plugin

本文主要介绍Flutter Plugin原理以及其开发和发布过程。

前言

Flutter优点主要体如今UI上--高性能且跨平台表现一致。可是针对平台(Android、IOS)的实现，如：获取电量、判断WiFi使用、调起WebView加载网页等，得调用特定平台的API包。Flutter Plugin就是为调用平台API而生。

下文中所说起到的"平台"指的是Android、IOS两端。

介绍

Flutter Plugin

包含针对Android（Java或Kotlin代码）或iOS（Objective-C或Swift代码）的原生实现，经过Platform Channels与FLutter(dart)层通信并暴露API。

Platform Channels

• 容许Flutter UI和平台之间传递消息。
• Platform Channel中的消息和响应是异步传递的，以确保用户界面保持响应。
• 一个Flutter应用能够存在多个channel，使用name做为区分。
• Platform Channel并不是是线程安全，故平台跟Flutter Engine的全部交互必须在平台的主线程中执行的。
• Flutter默认的消息编解码器是StandardMessageCodec class，现支持平台数据类型以下：

  

建立Flutter Plugin

接下来介绍使用Android Studio建立Flutter Plugin。使用Visual Studio Code建立的过程也是大同小异，机智的你必定能触类旁通，在这里就不一一细说。

第一步：选择建立一个Flutter project

第二步：选择Flutter Project的类型为Flutter Plugin

• Flutter Application 是建立一个纯flutter项目工程
• Flutter Plugin 是建立一个能够暴露平台API的插件工程
• Flutter Package 是建立一个纯Dart的组件包。
• Fultter Module 是建立一个Flutter Module，用于被引入现有的原生App。

  

第三步：填写Project name等工程信息，完成Flutter Plugin建立。

工程建立完成后的目录结构以下：

• lib/flutter_plugin_eg.dart 是插件包dart API实现
• android/src/main/ 是插件包API Android的实现
• ios/Classes/ 是插件包API IOS的实现
• example 是基于依赖当前插件的纯flutter示例工程，通常用做展现API调用。

注：从 Flutter 1.9 开始，iOS 新项目默认使用 Swift 语言，而非 Objective-C；Android 新项目则默认使用 Kotlin，而非 Java。若有须要，是可随时切换回以前的 Objective-C 或 Java。

使用Android模拟器运行example工程

咱们先看看示例工程在Android模拟器上的运行效果：

进入example工程目录，运行lib/main.dart。

APP在Android模拟器运行后，能够看到屏幕出现了"Running on: Android 9"。

接下来咱们经过代码看看flutter是怎么显示出当前平台的系统版本。

示例工程 example/lib/main.dart

关键代码：

...
import 'package:flutter_plugin_eg/flutter_plugin_eg.dart';
...
platformVersion = await FlutterPluginEg.platformVersion;
...
setState(() {
  _platformVersion = platformVersion;
});
...
body: Center(
  child: Text('Running on: $_platformVersion\n'),
)
复制代码

示例工程中的lib/main.dart引入了咱们刚刚建立Flutter Plugin中dart API实现flutter_plugin_eg.dart。

随后使用异步的方式调用flutter_plugin_eg.dart 的FlutterPluginEg.platformVersion并把返回值赋值给platformVersion，随后经过setState方法把platformVersion的值赋值给当前状态组件的_platformVersion，触发UI重渲把_platformVersion的值"Android 9"显示出来。

Flutter Plugin中dart API实现 lib/flutter_plugin_eg.dart

全量代码：

import 'dart:async';

import 'package:flutter/services.dart';

class FlutterPluginEg {
  static const MethodChannel _channel =
      const MethodChannel('flutter_plugin_eg');

  static Future<String> get platformVersion async {
    final String version = await _channel.invokeMethod('getPlatformVersion');
    return version;
  }
}

复制代码

• service.dart暴露与平台通信的API，如:MethodChannelPlatform Channel的一种类型
• _channel是FlutterPluginEg类的属性，是一个实例化的MethodChannel,name为"flutter_plugin_eg"
• platformVersion是FlutterPluginEg类的静态可计算属性，会异步返还一个String。
• platformVersion中，调用_channel的invokeMethod方法，入参"getPlatformVersion"为调用平台约定的方法名。而后把invokeMethod的异步结果赋值给String version做为platformVersion的返回值。

Flutter Plugin中Android实现

android/src/main/kotlin/.../FlutterPluginEgPlugin.kt 全量代码：

package com.yy.flutter_plugin_eg

import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.common.MethodChannel.MethodCallHandler
import io.flutter.plugin.common.MethodChannel.Result
import io.flutter.plugin.common.PluginRegistry.Registrar

class FlutterPluginEgPlugin: MethodCallHandler {
  companion object {
    @JvmStatic
    fun registerWith(registrar: Registrar) {
      val channel = MethodChannel(registrar.messenger(), "flutter_plugin_eg")
      channel.setMethodCallHandler(FlutterPluginEgPlugin())
    }
  }

  override fun onMethodCall(call: MethodCall, result: Result) {
    if (call.method == "getPlatformVersion") {
      result.success("Android ${android.os.Build.VERSION.RELEASE}")
    } else {
      result.notImplemented()
    }
  }
}

复制代码

再次强调：一个Flutter应用是能够有多个channel，并而每一个channel均可以有多个method，因此须要重点了解平台的代码是经过怎么样去对接channel name 与method name。从上文.kt源码能够看到:

• 注册MethodChannel约定通道名"flutter_plugin_eg"，并开始监听通道消息。

companion object {
    @JvmStatic
    fun registerWith(registrar: Registrar) {
      val channel = MethodChannel(registrar.messenger(), "flutter_plugin_eg")
      channel.setMethodCallHandler(FlutterPluginEgPlugin())
    }
  }
复制代码

• 实现onMethodCall方法，判断方法名"getPlatformVersion"，返回Android ${android.os.Build.VERSION.RELEASE}

override fun onMethodCall(call: MethodCall, result: Result) {
    if (call.method == "getPlatformVersion") {
      result.success("Android ${android.os.Build.VERSION.RELEASE}")
    } else {
      result.notImplemented()
    }
  }
复制代码

当channel name 和 method name 约定后，Flutter Plugin就能够在dart中方便调用平台的实现，并暴露API供Flutter项目使用。

Flutter Plugin中IOS实现

ios/Classes/SwiftFlutterPluginEgPlugin.swift

import Flutter
import UIKit

public class SwiftFlutterPluginEgPlugin: NSObject, FlutterPlugin {
  public static func register(with registrar: FlutterPluginRegistrar) {
    let channel = FlutterMethodChannel(name: "flutter_plugin_eg", binaryMessenger: registrar.messenger())
    let instance = SwiftFlutterPluginEgPlugin()
    registrar.addMethodCallDelegate(instance, channel: channel)
  }

  public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
    result("iOS " + UIDevice.current.systemVersion)
  }
}
复制代码

能够看出，IOS与Android实现思路雷同：经过"flutter_plugin_eg"注册FlutterMethodChannel并开始监听。

但惊奇发现Flutter Plugin中swift默认生成的代码竟然没FlutterMethodCall方法名判断，在swift断点看是能获取到"getPlatformVersion"这个方法名的。

IOS模拟器上运行效果：

发布Flutter Plugin

轮子造好后，能够发布到pub.dev，如下内容纯属搬砖。

补充文档

在Flutter Plugin根目录添加

• README.md:介绍包的文件
• CHANGELOG.md 记录每一个版本中的更改
• LICENSE 包含软件包许可条款的文件
• 编写API文档

发布package

一旦你实现了一个包，你能够在Pub上发布它 ，这样其余开发人员就能够轻松使用它

在发布以前，检查pubspec.yaml、README.md以及CHANGELOG.md文件，以确保其内容的完整性和正确性。

而后, 运行 dry-run 命令以查看是否都准备OK了:

flutter packages pub publish --dry-run
复制代码

最后, 运行发布命令:

flutter packages pub publish
复制代码

有关发布的详细信息，请参阅Pub publishing docs

思考

开发一个功能完备的APP，说到底仍是须要有原平生台开发的能力，就如Flutter Plugin须要开发原平生台部分。相信有不少Web前端童鞋也开始接触Flutter，可是若是不去深刻了解原生开发，那么也只能停留在UI层上。

做者

Doerme