Flutter 插件的建立及使用

時間  2019-11-06
標籤 flutter 插件 建立 使用 简体版
原文   原文鏈接

在 Flutter 項目的開發中，咱們須要根據本身的業務需求來建立各類各樣的插件，這裏記錄下關於 Flutter 插件的建立及使用的過程。java

官方文檔android

這裏主要記錄以下幾點：ios

  • 插件的建立
  • 獲取 Android 中的上下文 Context
  • Dart 調用插件方法及傳參
  • 插件調用 Dart 的方法及傳參
  • 插件中監聽 Activity 的生命週期及經常使用的回調方法
  • 使用 Delegate 的方式來寫插件
  • 插件的幾種依賴方式（pub、本地、git）
  • 插件的上傳及注意事項

插件的建立

咱們能夠經過兩種方式來建立插件，一種是使用 IDE（Android Studio 或者 Idea）來建立；另外一種是經過命令來建立。git

使用 IDE 建立插件

在菜單欄中選擇 File -> New -> New Flutter Project 會出現以下界面github

選中 Flutter Plugin 而後一路 Next 就能夠了。shell

使用命令建立插件

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

其中 com.example 是插件包名的一部分，plugin_name 是插件的名稱。插件的完整包名爲 com.example.plugin_namemarkdown

插件的目錄結構

使用上述兩種方式中的任一種建立完成以後，插件的目錄結構以下：app

圖中包含的幾個主要的目錄分別爲 android，example，ios，lib 這四個目錄：async

  • android 目錄是一個完整的 Android 工程，用來開發 Android 端的插件功能
  • example 目錄用來測試 Android 或者 IOS 端的插件功能
  • ios 目錄是一個完整的 IOS 工程，用來開發 IOS 端的插件功能
  • lib 目錄中的文件負責和 Android 或者 IOS 端的交互

獲取 Android 中的上下文 Context

當咱們建立好插件以後，Android 工程 裏面會有一個生成好的文件，這裏是 FlutterPluginDemoPlugin.java，以下：ide

/** 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
複製代碼

最後 github 地址

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程