Flutter 插件開發(fā)

插件的創(chuàng)建

我們可以通過(guò)兩種方式來(lái)創(chuàng)建插件帝际,一種是使用 IDE(Android Studio 或者 Idea)來(lái)創(chuàng)建;另一種是通過(guò)命令來(lái)創(chuàng)建怀估。

使用 IDE 創(chuàng)建插件

在菜單欄中選擇 File -> New -> New Flutter Project 會(huì)出現(xiàn)如下界面

image

選中 Flutter Plugin 然后一路 Next 就可以了狮鸭。

使用命令創(chuàng)建插件

flutter create --org com.example --template=plugin plugin_name

其中 com.example 是插件包名的一部分合搅,plugin_name 是插件的名稱。插件的完整包名為 com.example.plugin_name

插件的目錄結(jié)構(gòu)

使用上述兩種方式中的任一種創(chuàng)建完成之后歧蕉,插件的目錄結(jié)構(gòu)如下:

image

圖中包含的幾個(gè)主要的目錄分別為 android灾部,exampleios惯退,lib 這四個(gè)目錄: - android 目錄是一個(gè)完整的 Android 工程赌髓,用來(lái)開發(fā) Android 端的插件功能 - example 目錄用來(lái)測(cè)試 Android 或者 IOS 端的插件功能 - ios 目錄是一個(gè)完整的 IOS 工程,用來(lái)開發(fā) IOS 端的插件功能 - lib 目錄中的文件負(fù)責(zé)和 Android 或者 IOS 端的交互

獲取 Android 中的上下文 Context

當(dāng)我們創(chuàng)建好插件之后催跪,Android 工程 里面會(huì)有一個(gè)生成好的文件锁蠕,這里是 FlutterPluginDemoPlugin.java,如下:

/** FlutterPluginDemoPlugin */
public class FlutterPluginDemoPlugin implements MethodCallHandler {
  /** Plugin registration.*/
  public static void registerWith(Registrar registrar) {
    final MethodChannel channel = new MethodChannel(registrar.messenger(), "flutter_plugin_demo");
    channel.setMethodCallHandler(new FlutterPluginDemoPlugin());
  }

  @Override
  public void onMethodCall(MethodCall call, Result result) {
    // 省略部分代碼
  }
}

這個(gè)類中有一個(gè)與 Dart 層對(duì)應(yīng)的 MethodChannel懊蒸。

這個(gè)時(shí)候荣倾,如果我們添加一個(gè)彈出 Toast 的方法。Toast 需要一個(gè) Context 類型的參數(shù)骑丸,但是這個(gè)類中是沒(méi)有提供類似 this.getContext() 的方法來(lái)提供舌仍。這個(gè)時(shí)候,需要使用Registrar 這個(gè)類來(lái)獲取 Context通危。如下:

public class FlutterPluginDemoPlugin implements MethodCallHandler {
    // 上下文 Context
    private final Context context;

    public FlutterPluginDemoPlugin(Registrar registrar) {
        this.context = registrar.context();
    }

    /**
     * Plugin registration.
     */
    public static void registerWith(Registrar registrar) {
        final MethodChannel channel = new MethodChannel(registrar.messenger(), "flutter_plugin_demo");
        channel.setMethodCallHandler(new FlutterPluginDemoPlugin(registrar));
    }

    @Override
    public void onMethodCall(MethodCall call, Result result) {
        if (call.method.equals("getPlatformVersion")) {
            result.success("Android " + android.os.Build.VERSION.RELEASE);
        } else if (call.method.equals("showToast")) {
            // 彈出 Toast
            Toast.makeText(context, "來(lái)自 Android 端的 Toast", Toast.LENGTH_SHORT).show();
        } else {
            result.notImplemented();
        }
    }
}

對(duì)應(yīng)的铸豁,在 flutter_plugin_demo.dart 文件中需要新增一個(gè)方法來(lái)觸發(fā)彈出 Toast:

class FlutterPluginDemo {
  static const MethodChannel _channel =
      const MethodChannel('flutter_plugin_demo');

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

  /// 彈出 Toast
  static Future<void> showToast() async {
    await _channel.invokeMethod("showToast");
  }

}

然后在 example 工程中的去調(diào)用:

floatingActionButton: FloatingActionButton(
  onPressed: () async {
    /// 調(diào)用插件的 Toast 功能
    await FlutterPluginDemo.showToast();
  },
  child: Icon(Icons.add),
),

Dart 調(diào)用原生方法時(shí)傳遞參數(shù)

將上述的 showToast 方法改成接收一個(gè)參數(shù)的方法:

/// [message] Toast 的內(nèi)容
static Future<void> showToast({String message}) async {
    await _channel.invokeMethod("showToast", message);
}

在 Java 層就需要接收這個(gè)參數(shù):

String message = String message = call.arguments();
Toast.makeText(context, message, Toast.LENGTH_SHORT).show();

有時(shí)候需要傳遞好多個(gè)參數(shù),這個(gè)時(shí)候可以傳遞一個(gè) Map菊碟,如下:

/// 傳遞 map 類型的參數(shù)
static Future<void> showToast() async {
    Map<String, String> params = Map<String, String>();
    params['name'] = 'Lili';
    params['age'] = '20';
    params['country'] = 'China';
    await _channel.invokeMethod("showToast", params);
}

Java 層接收:

Map<String, String> params = call.arguments();
Toast.makeText(context, params.get("name"), Toast.LENGTH_SHORT).show();

原生向 Dart 層發(fā)送通知

這里我們使用 EventChannel 來(lái)讓原生向 Dart 層發(fā)送通知节芥,使用 EventChannel 的步驟如下:

  • Dart 層定義一個(gè) EventChannel
  • Dart 層監(jiān)聽(tīng)該 EventChannel,用來(lái)接收該 EventChannel 上的事件
  • 原生端定義一個(gè) EventChannel
  • 原生端向 Dart 層發(fā)送消息

Dart 層定義 EventChannel

static const EventChannel _eventChannel = EventChannel("flutter_plugin_event");

Dart 層監(jiān)聽(tīng)該 EventChannel

// 這里的 data 就是原生端發(fā)送過(guò)來(lái)的數(shù)據(jù)
_eventChannel.receiveBroadcastStream().listen((data) {
  //streamController.sink.add(data);
});

原生端定義 EventChannel

原生端里面逆害,首先需要定義一個(gè) EventChannel 头镊,然后需要為其設(shè)置一個(gè) StreamHandler,在 StreamHandleronListen 方法中會(huì)有一個(gè) EventChannel.EventSink 的參數(shù)魄幕,這個(gè)參數(shù)可以用來(lái)向 Dart 層發(fā)送消息拧晕。

private EventChannel.EventSink eventSink;
...
final EventChannel eventChannel = new EventChannel(registrar.messenger(), "flutter_plugin_event");
eventChannel.setStreamHandler(new EventChannel.StreamHandler() {
    @Override
    public void onListen(Object o, EventChannel.EventSink eventSink) {
        FlutterPluginDemoPlugin.this.eventSink = eventSink;
    }

    @Override
    public void onCancel(Object o) {
        FlutterPluginDemoPlugin.this.eventSink = null;
    }
});

原生端向 Dart 層發(fā)送消息

// 通知 Dart 層
if (null != eventSink) {
    eventSink.success("Dart 調(diào)用 原始方法成功");
}

插件中監(jiān)聽(tīng) Activity 常用的生命周期方法的回調(diào)

生命周期方法回調(diào)

有時(shí)候我們需要在 Activity 的生命周期方法中干一些事,比如友盟統(tǒng)計(jì)的時(shí)候梅垄,就需要在ActivityonResume()onPause() 中添加一些代碼;

要監(jiān)聽(tīng) onCreate()输玷,onStart()队丝,onResume() 等 方法的回調(diào),需要借助 Application.ActivityLifecycleCallbacks 這個(gè)接口欲鹏。

首先寫一個(gè)類 LifeCycleCallbacks 來(lái) 實(shí)現(xiàn) Application.ActivityLifecycleCallbacks 這個(gè)接口机久,然后將其注冊(cè)到 Application 的上下文中。

Application.ActivityLifecycleCallbacks 接口中提供的生命周期方法如下:

public interface ActivityLifecycleCallbacks {
    void onActivityCreated(Activity activity, Bundle savedInstanceState);
    void onActivityStarted(Activity activity);
    void onActivityResumed(Activity activity);
    void onActivityPaused(Activity activity);
    void onActivityStopped(Activity activity);
    void onActivitySaveInstanceState(Activity activity, Bundle outState);
    void onActivityDestroyed(Activity activity);
}

所以我們只需要寫一個(gè)類來(lái)實(shí)現(xiàn)它就可以了赔嚎。然后在對(duì)應(yīng)的方法里面寫對(duì)應(yīng)的代碼膘盖。

接著就是注冊(cè)了:

public FlutterPluginDemoPlugin(Registrar registrar) {
    ...
    ...
    // 注冊(cè)聲明周期方法的監(jiān)聽(tīng)
    ((Application) registrar.context())
        .registerActivityLifecycleCallbacks(new LifeCycleCallbacks());
}

最后在 onActivityDestroyed 生命周期方法中解注冊(cè)

class LifeCycleCallbacks implements Application.ActivityLifecycleCallbacks {
    ...
    ...
    @Override
    public void onActivityDestroyed(Activity activity) {
        if (activity == registrar.activity()) {
            ((Application) registrar.context()).unregisterActivityLifecycleCallbacks(this);
        }
    }  
}

權(quán)限監(jiān)聽(tīng)回調(diào)

public FlutterPluginDemoPlugin(Registrar registrar) {
        ...
        ...
        // 權(quán)限監(jiān)聽(tīng)回調(diào)
        registrar.addRequestPermissionsResultListener(new PluginRegistry.RequestPermissionsResultListener() {
        @Override
        public boolean onRequestPermissionsResult(int i, String[] strings, int[] ints) {
            return false;
        }
    });
}

startActivityForResult 的回調(diào)

public FlutterPluginDemoPlugin(Registrar registrar) {
    ...
    ...
    // startActivityForResult 回調(diào)
    registrar.addActivityResultListener(new PluginRegistry.ActivityResultListener() {
        @Override
        public boolean onActivityResult(int requestCode, int responseCode, Intent intent) {
            return false;
        }
    });
}

編寫一個(gè) Delegate 類來(lái)處理業(yè)務(wù)邏輯

上一小節(jié)中胧弛,我們?cè)?FlutterPluginDemoPlugin這一個(gè)類中處理 Activity 的聲明周期的回調(diào)方法,權(quán)限申請(qǐng)的回調(diào)方法侠畔,Activity 跳轉(zhuǎn)的回調(diào)方法结缚。這個(gè)時(shí)候,FlutterPluginDemoPlugin 這個(gè)類的代碼就會(huì)顯得非常的多软棺。

我們可以寫一個(gè)類來(lái)幫助插件類處理這些事情红竭,這里寫一個(gè) PluginDelegate 類來(lái)實(shí)現(xiàn)這個(gè)功能:

public class PluginDelegate implements
        Application.ActivityLifecycleCallbacks,
        PluginRegistry.RequestPermissionsResultListener,
        PluginRegistry.ActivityResultListener {

    private final Context context;
    private final Application application;

    public PluginDelegate(PluginRegistry.Registrar registrar) {
        this.context = registrar.context();
        this.application = (Application) context;
    }

    public void methodA(MethodCall call, MethodChannel.Result result){
        // do something...
    }

    public void methodB(MethodCall call, MethodChannel.Result result){
        // do something...
    }
    ...
    ...
    ...
    @Override
    public void onActivityDestroyed(Activity activity) {
        application.unregisterActivityLifecycleCallbacks(this);
    }

    @Override
    public boolean onRequestPermissionsResult(int i, String[] strings, int[] ints) {
        return false;
    }

    @Override
    public boolean onActivityResult(int i, int i1, Intent intent) {
        return false;
    }
}

可以看出 PluginDelegate 類實(shí)現(xiàn)了上一小節(jié)中需要處理的三種回調(diào)的接口,那么我們?cè)?FlutterPluginDemoPlugin 插件類中就可以這樣:

public class FlutterPluginDemoPlugin implements MethodCallHandler {
    ...
    ...
    private final PluginDelegate delegate;

    // 構(gòu)造方法
    public FlutterPluginDemoPlugin(Registrar registrar, PluginDelegate delegate) {
        ...
        this.delegate = delegate;
        ...
        // 聲明周期回調(diào)
        ((Application) context).registerActivityLifecycleCallbacks(delegate);

        // 權(quán)限聲明回調(diào)
        registrar.addRequestPermissionsResultListener(delegate);

        // 頁(yè)面跳轉(zhuǎn)回調(diào)
        registrar.addActivityResultListener(delegate);
    }

    /**
     * Plugin registration.
     */
    public static void registerWith(Registrar registrar) {
        final MethodChannel channel = new MethodChannel(registrar.messenger(), "flutter_plugin_demo");
        // 初始化PluginDelegate
        final PluginDelegate delegate = new PluginDelegate(registrar);
        channel.setMethodCallHandler(new FlutterPluginDemoPlugin(registrar, delegate));
    }

    @Override
    public void onMethodCall(MethodCall call, Result result) {
        // 調(diào)用代理類方法演示
        if (call.method.equals("methodA")) {
            delegate.methodA(call, result);
        }else if(call.method.equals("methodB")){
            delegate.methodB(call, result);
        }
    }
}

插件的依賴方式

官方文檔

這里有三種方式用來(lái)依賴插件 - pub 依賴 - git 依賴 - 本地依賴

pub 依賴

這種是最常見(jiàn)的方式喘落,直接在 工程的 pubspec.yaml 中依賴

dependencies:
  flutter:
    sdk: flutter
  # 添加 toast 的依賴
  toast: ^0.1.5

git 依賴

很多時(shí)候茵宪,pub 上的某個(gè)插件并不能完全滿足我們實(shí)際的業(yè)務(wù)需求,如 UI 或者一些邏輯問(wèn)題瘦棋,這個(gè)時(shí)候我們可以將其源碼下載下來(lái)稀火,然后根據(jù)自己的業(yè)務(wù)需求對(duì)其進(jìn)行修改。改完之后通常會(huì)上傳到公司的私有倉(cāng)庫(kù)中(GitHub 或者 GitLab)赌朋,然后在工程中就需要依賴私有倉(cāng)庫(kù)中的庫(kù)

dependencies:
 toast:
    git:
      url: http://xxx/toast.git

還可能依賴該倉(cāng)庫(kù)指定分支上的代碼凰狞,如依賴遠(yuǎn)程 dev 分支上的代碼

dependencies:
  toast:
     git:
      ref: dev
      url: http://xxx/toast.git

本地依賴

有時(shí)候需要在項(xiàng)目中測(cè)試本地的某個(gè)插件,這個(gè)時(shí)候就可以使用本地依賴的方式來(lái)依賴插件

dependencies:
    toast:
        path: user/xxx/toast/

插件的上傳

這里是上傳到 pub.dev 上面

在上傳之前使用如下命令檢查插件中的一些問(wèn)題:

flutter packages pub publish --dry-run

還需要做的就是上傳前的需要清理插件箕慧,避免插件過(guò)大無(wú)法上傳

flutter clean

使用如下命令進(jìn)行插件的上傳

flutter packages pub publish

轉(zhuǎn)自鏈接:http://www.reibang.com/p/c2b54bb47e5b

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末服球,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子颠焦,更是在濱河造成了極大的恐慌斩熊,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,214評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件伐庭,死亡現(xiàn)場(chǎng)離奇詭異粉渠,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)圾另,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門霸株,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人集乔,你說(shuō)我怎么就攤上這事去件。” “怎么了扰路?”我有些...
    開封第一講書人閱讀 152,543評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵尤溜,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我汗唱,道長(zhǎng)宫莱,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,221評(píng)論 1 279
  • 正文 為了忘掉前任哩罪,我火速辦了婚禮授霸,結(jié)果婚禮上巡验,老公的妹妹穿的比我還像新娘。我一直安慰自己碘耳,他們只是感情好显设,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評(píng)論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著藏畅,像睡著了一般敷硅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上愉阎,一...
    開封第一講書人閱讀 49,007評(píng)論 1 284
  • 那天绞蹦,我揣著相機(jī)與錄音,去河邊找鬼榜旦。 笑死幽七,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的溅呢。 我是一名探鬼主播澡屡,決...
    沈念sama閱讀 38,313評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼咐旧!你這毒婦竟也來(lái)了驶鹉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,956評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤铣墨,失蹤者是張志新(化名)和其女友劉穎室埋,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體伊约,經(jīng)...
    沈念sama閱讀 43,441評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡姚淆,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評(píng)論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了屡律。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片腌逢。...
    茶點(diǎn)故事閱讀 38,018評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖超埋,靈堂內(nèi)的尸體忽然破棺而出搏讶,到底是詐尸還是另有隱情,我是刑警寧澤霍殴,帶...
    沈念sama閱讀 33,685評(píng)論 4 322
  • 正文 年R本政府宣布窍蓝,位于F島的核電站,受9級(jí)特大地震影響繁成,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜淑玫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評(píng)論 3 307
  • 文/蒙蒙 一巾腕、第九天 我趴在偏房一處隱蔽的房頂上張望面睛。 院中可真熱鬧,春花似錦尊搬、人聲如沸叁鉴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)幌墓。三九已至,卻和暖如春冀泻,著一層夾襖步出監(jiān)牢的瞬間常侣,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工弹渔, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留胳施,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,467評(píng)論 2 352
  • 正文 我出身青樓肢专,卻偏偏與公主長(zhǎng)得像舞肆,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子博杖,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評(píng)論 2 345