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';

開發

插件通信機制

15584954324475.png

如上圖所示,Flutter 跟平臺相關代碼可以通過 MethodChannel 進行通信。客戶端通過 MethodChannel 將方法調用和參數發生給 FlutterFlutter也通過 MethodChannel 接收相關的數據。

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

創建插件項目

接下來利用 Android Studio 來進行插件開發, 創建成功后,目錄結構如下:

dir_struct.png

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

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

一個lib文件夾:包含里package的公開代碼,文件夾至少需要存在<pakcage-name>.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 通信

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]];
 //兩種回調方式:
    //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 獲取到對應的值
如下為:類型對應表

15585074766210.jpg

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 官方文檔
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,546評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,570評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,505評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,017評論 1 313
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,786評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,219評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,287評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,438評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,971評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,796評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,995評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,540評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,230評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,918評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,697評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,991評論 2 374

推薦閱讀更多精彩內容