Flutter之初識iOS插件開發(fā)

Flutter插件

簡介

Flutter 的庫是以 package 的方式來管理恒削。Package 分為兩種卿捎,Dart package(也叫 library package) 和 plugin package巩割。日常使用的 import 'package:flutter/material.dart'; 就是 Dart 包,它只能使用 Dart 和 Flutter 提供的 API, 決定了它只能用在 Flutter 上油坝;今天文章內容主要講解 Flutter 插件開發(fā)指的是后者,即 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 會自動去下載此包,或者通過命令豆巨,在項目的根目錄執(zhí)行 flutter packages get
使用就相對簡單了剩辟,如下:
import 'package:shared_preferences/shared_preferences.dart';

開發(fā)

插件通信機制

15584954324475.png

如上圖所示,Flutter 跟平臺相關代碼可以通過 MethodChannel 進行通信往扔》妨裕客戶端通過 MethodChannel 將方法調用和參數發(fā)生給 FlutterFlutter也通過 MethodChannel 接收相關的數據萍膛。

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

創(chuàng)建插件項目

接下來利用 Android Studio 來進行插件開發(fā), 創(chuàng)建成功后,目錄結構如下:

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 

默認情況下,創(chuàng)建的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執(zhí)行代理函數
  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閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異洋措,居然都是意外死亡济蝉,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進店門菠发,熙熙樓的掌柜王于貴愁眉苦臉地迎上來王滤,“玉大人,你說我怎么就攤上這事雷酪∈缙停” “怎么了?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵哥力,是天一觀的道長。 經常有香客問我墩弯,道長吩跋,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任渔工,我火速辦了婚禮锌钮,結果婚禮上,老公的妹妹穿的比我還像新娘引矩。我一直安慰自己梁丘,他們只是感情好,可當我...
    茶點故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布旺韭。 她就那樣靜靜地躺著氛谜,像睡著了一般。 火紅的嫁衣襯著肌膚如雪区端。 梳的紋絲不亂的頭發(fā)上值漫,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天,我揣著相機與錄音织盼,去河邊找鬼杨何。 笑死,一個胖子當著我的面吹牛沥邻,可吹牛的內容都是我干的危虱。 我是一名探鬼主播,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼唐全,長吁一口氣:“原來是場噩夢啊……” “哼埃跷!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤捌蚊,失蹤者是張志新(化名)和其女友劉穎集畅,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體缅糟,經...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡挺智,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了窗宦。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赦颇。...
    茶點故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖赴涵,靈堂內的尸體忽然破棺而出媒怯,到底是詐尸還是另有隱情,我是刑警寧澤髓窜,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布扇苞,位于F島的核電站,受9級特大地震影響寄纵,放射性物質發(fā)生泄漏鳖敷。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一程拭、第九天 我趴在偏房一處隱蔽的房頂上張望定踱。 院中可真熱鬧,春花似錦恃鞋、人聲如沸崖媚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽畅哑。三九已至,卻和暖如春资锰,著一層夾襖步出監(jiān)牢的瞬間敢课,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工绷杜, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留直秆,地道東北人。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓鞭盟,卻偏偏與公主長得像圾结,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子齿诉,可洞房花燭夜當晚...
    茶點故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內容