Flutter插件

簡(jiǎn)介

Flutter 的庫(kù)是以 package 的方式來(lái)管理。Package 分為兩種，Dart package（也叫 library package） 和 plugin package。日常使用的 import 'package:flutter/material.dart'; 就是 Dart 包，它只能使用 Dart 和 Flutter 提供的 API, 決定了它只能用在 Flutter 上；今天文章內(nèi)容主要講解 Flutter 插件開(kāi)發(fā)指的是后者，即 plugin package。Flutter 插件既包含了dart代碼編寫(xiě)的api，又包含了平臺(tái)（ Android/iOS ）特定實(shí)現(xiàn)的package，可以被 Android 和 iOS 調(diào)用。

使用

可以在 pub.dev 網(wǎng)站查找你所需要的包。

我們以 shared_preferences 這個(gè)庫(kù)為例，在項(xiàng)目中的 pubspec.yaml 聲明一個(gè)依賴(lài):

dependencies:
  shared_preferences: ^0.5.2

^0.5.2 與 0.5.2 兼容的版本版本號(hào)，同時(shí)你也可以使用如下格式：

• any：任意版本
• 1.2.3：特定的版本
• <1.2.3：小于 1.2.3 的版本，此外還有 <=、>、>= 可以使用

• =1.2.3 <2.0.0’：指定一個(gè)范圍

更加詳細(xì)的配置可以參考 versioning

保存后 Android Studio 會(huì)自動(dòng)去下載此包，或者通過(guò)命令，在項(xiàng)目的根目錄執(zhí)行 flutter packages get
使用就相對(duì)簡(jiǎn)單了，如下：
import 'package:shared_preferences/shared_preferences.dart';

開(kāi)發(fā)

插件通信機(jī)制

15584954324475.png

如上圖所示，F(xiàn)lutter 跟平臺(tái)相關(guān)代碼可以通過(guò) MethodChannel 進(jìn)行通信?？蛻舳送ㄟ^(guò) MethodChannel 將方法調(diào)用和參數(shù)發(fā)生給 Flutter，Flutter也通過(guò) MethodChannel 接收相關(guān)的數(shù)據(jù)。

消息和響應(yīng)是異步傳遞的，以確保用戶界面保持響應(yīng)(不會(huì)掛起)

創(chuàng)建插件項(xiàng)目

接下來(lái)利用 Android Studio 來(lái)進(jìn)行插件開(kāi)發(fā), 創(chuàng)建成功后，目錄結(jié)構(gòu)如下：

dir_struct.png

• android：插件本地代碼的 Android 端實(shí)現(xiàn)
• ios：iOS 端的實(shí)現(xiàn)
• lib：Dart 代碼。插件的客戶將會(huì)使用這里實(shí)現(xiàn)的接口
• example：插件的使用示例
• test: 測(cè)試

其中，一個(gè)最package最少包含了兩部分： * 一個(gè)pubspec.yaml文件：元數(shù)據(jù)文件，聲明了package的名稱(chēng)、版本、作者等信息。

一個(gè)lib文件夾：包含里package的公開(kāi)代碼，文件夾至少需要存在<pakcage-name>.dart這個(gè)文件。

也可以利用 Flutter 命令來(lái)生成

flutter create --org com.kinsomy --template=plugin -i swift -a kotlin hello 

默認(rèn)情況下，創(chuàng)建的plugin項(xiàng)目是使用 objective-c（iOS）和 java（Android）編寫(xiě)，如果需要增加對(duì)swift和kotlin的支持，可以在命令中添加 -i 和 -a。

注意點(diǎn)：插件命名符合 lowercase_with_underscores

編寫(xiě) iOS 插件

FlutterPluginTestPlugin_m.png

Flutter 與 iOS 通信

iOS-Flutter插件_pdf.png

!

Dart 代碼

import 'dart:async';
import 'package:flutter/services.dart';

class FlutterPluginTest {
  static const MethodChannel _channel =
  const MethodChannel('flutter_plugin_test');

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

iOS 代碼

@implementation FlutterPluginTestPlugin
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
  FlutterMethodChannel* channel = [FlutterMethodChannel
      methodChannelWithName:@"flutter_plugin_test"
            binaryMessenger:[registrar messenger]];
 //兩種回調(diào)方式：
    //1.代理本質(zhì)：內(nèi)部調(diào)用channel 的Block執(zhí)行代理函數(shù)
  FlutterPluginTestPlugin* instance = [[FlutterPluginTestPlugin alloc] init];
  [registrar addMethodCallDelegate:instance channel:channel];
//    //2.
//    channel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
//
//    }
}

- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
  if ([@"getPlatformVersion" isEqualToString:call.method]) {
    result([@"iOS " stringByAppendingString:[[UIDevice currentDevice] systemVersion]]);
  } else {
    result(FlutterMethodNotImplemented);
  }
}
@end

其中，在 dart 端傳入?yún)?shù)被解析為Map ,到了 oc 中會(huì)變成 NSDictionary,然后通過(guò) key 獲取到對(duì)應(yīng)的值
如下為：類(lèi)型對(duì)應(yīng)表

15585074766210.jpg

iOS 與 Flutter 通信

Dart端

Channel.setMethodCallHandler((MethodCall call) async {
      assert(call.method == 'launch');
      handler(call.arguments);
    });

iOS端

 [self.channel invokeMethod:@"FunctionName" arguments:參數(shù)];

補(bǔ)充

在 通信機(jī)制中，還有兩類(lèi) FlutterEventChannel，F(xiàn)lutterBasicMessageChannel，同時(shí)在Dart端使用同類(lèi)型的Channel

參考文章

1. packages 官方文檔