Flutter之初識iOS插件

Flutter插件

同時發表於簡書

簡介

Flutter 的庫是以 package 的方式來管理。Package 分爲兩種，Dart package（也叫 library package） 和 plugin package。平常使用的 import 'package:flutter/material.dart'; 就是 Dart 包，它只能使用 Dart 和 Flutter 提供的 API, 決定了它只能用在 Flutter 上；今天文章內容主要講解 Flutter 插件開發指的是後者，即 plugin package。Flutter 插件既包含了dart代碼編寫的api，又包含了平臺（ Android/iOS ）特定實現的package，能夠被 Android 和 iOS 調用。

使用

能夠在 pub.dev 網站查找你所須要的包。

咱們以 shared_preferences 這個庫爲例，在項目中的 pubspec.yaml 聲明一個依賴:

dependencies:
  shared_preferences: ^0.5.2
複製代碼

^0.5.2 與 0.5.2 兼容的版本版本號，同時你也能夠使用以下格式：

• any：任意版本
• 1.2.3：特定的版本
• <1.2.3：小於 1.2.3 的版本，此外還有 <=、>、>= 能夠使用

• =1.2.3 <2.0.0’：指定一個範圍

更加詳細的配置能夠參考 versioning

保存後 Android Studio 會自動去下載此包，或者經過命令，在項目的根目錄執行 flutter packages get 使用就相對簡單了，以下： import 'package:shared_preferences/shared_preferences.dart'; ##開發

插件通訊機制

如上圖所示，Flutter 跟平臺相關代碼能夠經過 MethodChannel 進行通訊。客戶端經過 MethodChannel 將方法調用和參數發生給 Flutter，Flutter也經過 MethodChannel 接收相關的數據。

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

建立插件項目

接下來利用 Android Studio 來進行插件開發, 建立成功後，目錄結構以下：

• android：插件本地代碼的 Android 端實現
• ios：iOS 端的實現
• lib：Dart 代碼。插件的客戶將會使用這裏實現的接口
• example：插件的使用示例
• test: 測試

其中，一個最package最少包含了兩部分： * 一個pubspec.yaml文件：元數據文件，聲明瞭package的名稱、版本、做者等信息。

一個lib文件夾：包含裏package的公開代碼，文件夾至少須要存在.dart這個文件。

也能夠利用 Flutter 命令來生成

flutter create --org com.kinsomy --template=plugin -i swift -a kotlin hello 
複製代碼

默認狀況下，建立的plugin項目是使用 objective-c（iOS）和 java（Android）編寫，若是須要增長對swift和kotlin的支持，能夠在命令中添加 -i 和 -a。

注意點：插件命名符合 lowercase_with_underscores

編寫 iOS 插件

FlutterPluginTestPlugin_m.png

Flutter 與 iOS 通訊

!

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]];
 //兩種回調方式：
    //1.代理本質：內部調用channel 的Block執行代理函數
  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 端傳入參數被解析爲Map ,到了 oc 中會變成 NSDictionary,而後經過 key 獲取到對應的值 以下爲：類型對應表

iOS 與 Flutter 通訊

Dart端

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

iOS端

[self.channel invokeMethod:@"FunctionName" arguments:參數];
複製代碼

補充

在 通訊機制中，還有兩類 FlutterEventChannel，FlutterBasicMessageChannel，同時在Dart端使用同類型的Channel

參考文章

1. packages 官方文檔