Flutter 插件的創建及使用


https://zhuanlan.zhihu.com/p/85849574?utm_source=wechat_session

在 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

插件的目錄結構

使用上述兩種方式中的任一種創建完成之后,插件的目錄結構如下:

 

 

圖中包含的幾個主要的目錄分別為 android,example,ios,lib 這四個目錄: - 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,在 StreamHandler 的 onListen 方法中會有一個 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 的生命周期方法中干一些事,比如友盟統計的時候,就需要在Activity 的 onResume()和 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
 
liusilong/flutter_plugin_demo​github.com
圖標

 

發布於 2019-10-09


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM