Flutter 外掛的建立及使用

劉斯龍 發表於2019-10-09

Flutter 專案的開發中,我們需要根據自己的業務需求來建立各種各樣的外掛,這裡記錄下關於 Flutter 外掛的建立及使用的過程。

官方文件

這裡主要記錄如下幾點:

  • 外掛的建立
  • 獲取 Android 中的上下文 Context
  • Dart 呼叫外掛方法及傳參
  • 外掛呼叫 Dart 的方法及傳參
  • 外掛中監聽 Activity 的生命週期及常用的回撥方法
  • 使用 Delegate 的方式來寫外掛
  • 外掛的幾種依賴方式(pub、本地、git)
  • 外掛的上傳及注意事項

外掛的建立

我們可以通過兩種方式來建立外掛,一種是使用 IDE(Android Studio 或者 Idea)來建立;另一種是通過命令來建立。

使用 IDE 建立外掛

在選單欄中選擇 File -> New -> New Flutter Project 會出現如下介面

選中 Flutter Plugin 然後一路 Next 就可以了。

使用命令建立外掛

flutter create --org com.example --template=plugin plugin_name
複製程式碼

其中 com.example 是外掛包名的一部分,plugin_name 是外掛的名稱。外掛的完整包名為 com.example.plugin_name

外掛的目錄結構

使用上述兩種方式中的任一種建立完成之後,外掛的目錄結構如下:

圖中包含的幾個主要的目錄分別為 androidexampleioslib 這四個目錄:

  • android 目錄是一個完整的 Android 工程,用來開發 Android 端的外掛功能
  • example 目錄用來測試 Android 或者 IOS 端的外掛功能
  • ios 目錄是一個完整的 IOS 工程,用來開發 IOS 端的外掛功能
  • lib 目錄中的檔案負責和 Android 或者 IOS 端的互動

獲取 Android 中的上下文 Context

當我們建立好外掛之後,Android 工程 裡面會有一個生成好的檔案,這裡是 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) {
    // 省略部分程式碼
  }
}
複製程式碼

這個類中有一個與 Dart 層對應的 MethodChannel

這個時候,如果我們新增一個彈出 Toast 的方法。Toast 需要一個 Context 型別的引數,但是這個類中是沒有提供類似 this.getContext() 的方法來提供。這個時候,需要使用Registrar 這個類來獲取 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, "來自 Android 端的 Toast", Toast.LENGTH_SHORT).show();
        } else {
            result.notImplemented();
        }
    }
}
複製程式碼

對應的,在 flutter_plugin_demo.dart 檔案中需要新增一個方法來觸發彈出 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 工程中的去呼叫:

floatingActionButton: FloatingActionButton(
  onPressed: () async {
    /// 呼叫外掛的 Toast 功能
    await FlutterPluginDemo.showToast();
  },
  child: Icon(Icons.add),
),
複製程式碼

Dart 呼叫原生方法時傳遞引數

將上述的 showToast 方法改成接收一個引數的方法:

/// [message] Toast 的內容
static Future<void> showToast({String message}) async {
    await _channel.invokeMethod("showToast", message);
}
複製程式碼

在 Java 層就需要接收這個引數:

String message = String message = call.arguments();
Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
複製程式碼

有時候需要傳遞好多個引數,這個時候可以傳遞一個 Map,如下:

/// 傳遞 map 型別的引數
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 層傳送通知

這裡我們使用 EventChannel 來讓原生向 Dart 層傳送通知,使用 EventChannel 的步驟如下:

  • Dart 層定義一個 EventChannel
  • Dart 層監聽該 EventChannel,用來接收該 EventChannel 上的事件
  • 原生端定義一個 EventChannel
  • 原生端向 Dart 層傳送訊息

Dart 層定義 EventChannel

static const EventChannel _eventChannel = EventChannel("flutter_plugin_event");
複製程式碼

Dart 層監聽該 EventChannel

// 這裡的 data 就是原生端傳送過來的資料
_eventChannel.receiveBroadcastStream().listen((data) {
  //streamController.sink.add(data);
});
複製程式碼

原生端定義 EventChannel

原生端裡面,首先需要定義一個 EventChannel ,然後需要為其設定一個 StreamHandler,在 StreamHandleronListen 方法中會有一個 EventChannel.EventSink 的引數,這個引數可以用來向 Dart 層傳送訊息。

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 層傳送訊息

// 通知 Dart 層
if (null != eventSink) {
    eventSink.success("Dart 呼叫 原始方法成功");
}
複製程式碼

外掛中監聽 Activity 常用的生命週期方法的回撥

生命週期方法回撥

有時候我們需要在 Activity 的生命週期方法中幹一些事,比如友盟統計的時候,就需要在ActivityonResume()onPause() 中新增一些程式碼;

要監聽 onCreate()onStart()onResume() 等 方法的回撥,需要藉助 Application.ActivityLifecycleCallbacks 這個介面。

首先寫一個類 LifeCycleCallbacks 來 實現 Application.ActivityLifecycleCallbacks 這個介面,然後將其註冊到 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);
}
複製程式碼

所以我們只需要寫一個類來實現它就可以了。然後在對應的方法裡面寫對應的程式碼。

接著就是註冊了:

public FlutterPluginDemoPlugin(Registrar registrar) {
    ...
    ...
    // 註冊宣告週期方法的監聽
    ((Application) registrar.context())
        .registerActivityLifecycleCallbacks(new LifeCycleCallbacks());
}
複製程式碼

最後在 onActivityDestroyed 生命週期方法中解註冊

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

許可權監聽回撥

public FlutterPluginDemoPlugin(Registrar registrar) {
        ...
        ...
        // 許可權監聽回撥
        registrar.addRequestPermissionsResultListener(new PluginRegistry.RequestPermissionsResultListener() {
        @Override
        public boolean onRequestPermissionsResult(int i, String[] strings, int[] ints) {
            return false;
        }
    });
}
複製程式碼

startActivityForResult 的回撥

public FlutterPluginDemoPlugin(Registrar registrar) {
    ...
    ...
    // startActivityForResult 回撥
    registrar.addActivityResultListener(new PluginRegistry.ActivityResultListener() {
        @Override
        public boolean onActivityResult(int requestCode, int responseCode, Intent intent) {
            return false;
        }
    });
}
複製程式碼

編寫一個 Delegate 類來處理業務邏輯

上一小節中,我們在 FlutterPluginDemoPlugin這一個類中處理 Activity 的宣告週期的回撥方法,許可權申請的回撥方法,Activity 跳轉的回撥方法。這個時候,FlutterPluginDemoPlugin 這個類的程式碼就會顯得非常的多。

我們可以寫一個類來幫助外掛類處理這些事情,這裡寫一個 PluginDelegate 類來實現這個功能:

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 類實現了上一小節中需要處理的三種回撥的介面,那麼我們在 FlutterPluginDemoPlugin 外掛類中就可以這樣:

public class FlutterPluginDemoPlugin implements MethodCallHandler {
    ...
    ...
    private final PluginDelegate delegate;
    
    // 構造方法
    public FlutterPluginDemoPlugin(Registrar registrar, PluginDelegate delegate) {
        ...
        this.delegate = delegate;
        ...
        // 宣告週期回撥
        ((Application) context).registerActivityLifecycleCallbacks(delegate);

        // 許可權宣告回撥
        registrar.addRequestPermissionsResultListener(delegate);

        // 頁面跳轉回撥
        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) {
        // 呼叫代理類方法演示
        if (call.method.equals("methodA")) {
            delegate.methodA(call, result);
        }else if(call.method.equals("methodB")){
            delegate.methodB(call, result);
        }
    }
}
複製程式碼

外掛的依賴方式

官方文件

這裡有三種方式用來依賴外掛

  • pub 依賴
  • git 依賴
  • 本地依賴

pub 依賴

這種是最常見的方式,直接在 工程的 pubspec.yaml 中依賴

dependencies:
  flutter:
    sdk: flutter
  # 新增 toast 的依賴
  toast: ^0.1.5
複製程式碼

git 依賴

很多時候,pub 上的某個外掛並不能完全滿足我們實際的業務需求,如 UI 或者一些邏輯問題,這個時候我們可以將其原始碼下載下來,然後根據自己的業務需求對其進行修改。改完之後通常會上傳到公司的私有倉庫中(GitHub 或者 GitLab),然後在工程中就需要依賴私有倉庫中的庫

dependencies:
 toast:
    git:
      url: http://xxx/toast.git
複製程式碼

還可能依賴該倉庫指定分支上的程式碼,如依賴遠端 dev 分支上的程式碼

dependencies:
  toast:
     git:
      ref: dev
      url: http://xxx/toast.git
複製程式碼

本地依賴

有時候需要在專案中測試本地的某個外掛,這個時候就可以使用本地依賴的方式來依賴外掛

dependencies:
    toast:
        path: user/xxx/toast/
複製程式碼

外掛的上傳

這裡是上傳到 pub.dev 上面

在上傳之前使用如下命令檢查外掛中的一些問題:

flutter packages pub publish --dry-run
複製程式碼

還需要做的就是上傳前的需要清理外掛,避免外掛過大無法上傳

flutter clean
複製程式碼

使用如下命令進行外掛的上傳

flutter packages pub publish
複製程式碼

最後 github 地址


相關文章

Flutter

Flutter(十二)之練習高仿豆瓣電影列表

更新地點: 首發於公眾號,第二天更新於掘金、思否、開發者頭條等地方;更多交流: 可以新增我的微信 372623326,關注我的微博:coderwhy由於Mac的檔期問題(Mac忙其他前些的),這裡給出
Flutter

Flutter(十)之Flutter的滾動Widget

前言一:接下來一段時間我會陸續更新一些列Flutter文字教程更新進度: 每週至少兩篇;更新地點: 首發於公眾號,第二天更新於掘金、思否、開發者頭條等地方;更多交流: 可以新增我的微信 3726233
Flutter

Flutter實戰 | 從 0 搭建「網易雲音樂」APP(一、建立專案、新增外掛、通用程式碼)

本系列可能會伴隨大家很長時間,這裡我會從0開始搭建一個「網易雲音樂」的APP出來。下面是該APP 功能的思維導圖:因為工作的原因,一星期有可能只更新一篇該系列的文章,不過一星期最少一篇。本章節為第一節
Flutter

Flutter動畫實現粒子漂浮效果

本文所有原始碼見github.com/MoonRiser/F…要問2019年最火的移動端框架,肯定非Google的Flutter莫屬。本著學習的態度,基本的Dart語法(個人感覺語法風格接近Java+
Flutter

Flutter | 定義一個通用的多功能網路請求 Widget

首先道個歉,最近公司很忙,又趕上十一假期,所以鴿了將近半個月。不過,後續還是會每週最少更新兩篇的!那說起網路請求的控制元件,我們首先是不是會想起 FutureBuilder?FutureBuilder
Flutter

Flutter很好用,but……

前言為什麼有這篇文章?這篇文章可以說是個人Flutter問題隨筆吧,雖然Flutter可以方便的做到跨平臺,但是畢竟是新專案,功能沒那麼全面也是意料之中,所以在此記錄跟蹤一下目前在使用Flutter過
Flutter

Flutter(十一)之封裝幾個小Widget

更新地點: 首發於公眾號,第二天更新於掘金、思否、開發者頭條等地方;更多交流: 可以新增我的微信 372623326,關注我的微博:coderwhy學習完列表渲染後,我打算做一個綜合一點的練習小專案:
Flutter

FLUTTER混合工程踩坑之旅

簡介Flutter 是 Google推出並開源的移動應用開發框架,主打跨平臺、高保真、高效能。開發者可以通過 Dart語言開發 App,一套程式碼同時執行在 iOS 和 Android平臺。 Flut
Flutter

把Flutter擴充套件到微信小程式端的探索

Google Flutter是一個非常優秀的跨端框架,不僅可以執行在Android、 iOS平臺,而且可以支援Web和桌面應用。在國內小程式是非常重要的技術平臺,我們也一直思考能否把Flutter擴充
Flutter|Android

Flutter 跨端網路抓包 (以Android 為例)

背景在很多公司測試環境使用的是內網測試,我們公司也是。但是我們有點扯的是內網的域名沒有配置內網域名解析,必須手動配置hosts才可以正常訪問測試環境的域名。如下:# localhost is used