Flutter 插件的创建及使用

墨蓝 2022-12-26 08:17 420阅读 0赞

在 [Flutter][] 项目的开发中，我们需要根据自己的业务需求来创建各种各样的插件，这里记录下关于 Flutter 插件的创建及使用的过程。

[官方文档][Link 1]

这里主要记录如下几点：

*  **插件的创建**
 *  **获取 Android 中的上下文 Context**
 *  **Dart 调用插件方法及传参**
 *  **插件调用 Dart 的方法及传参**
 *  **插件中监听 Activity 的生命周期及常用的回调方法**
 *  **使用 Delegate 的方式来写插件**
 *  **插件的几种依赖方式（pub、本地、git）**
 *  **插件的上传及注意事项**

## 插件的创建 ##

我们可以通过两种方式来创建插件，一种是使用 IDE（Android Studio 或者 Idea）来创建；另一种是通过命令来创建。

### 使用 IDE 创建插件 ###

在菜单栏中选择 `File -> New -> New Flutter Project` 会出现如下界面

![2a68e737e686ee3693ea596393512a4a.png][]

image

选中 `Flutter Plugin` 然后一路 `Next` 就可以了。

### 使用命令创建插件 ###

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

其中 `com.example` 是插件包名的一部分，`plugin_name` 是插件的名称。插件的完整包名为 `com.example.plugin_name`

### 插件的目录结构 ###

使用上述两种方式中的任一种创建完成之后，插件的目录结构如下：

![b5bb28c8e75bdd2262818eea1f8b869e.png][]

image

图中包含的几个主要的目录分别为 **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);
            }
        }
    }

## 插件的依赖方式 ##

[官方文档][Link 2]

这里有三种方式用来依赖插件

*  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 地址][github]

6人点赞

Flutter

作者：c263ae2147d8  
链接：https://www.jianshu.com/p/b4f32769a7f0  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[Flutter]: https://links.jianshu.com/go?to=https%3A%2F%2Fflutter.dev%2Fdocs
[Link 1]: https://links.jianshu.com/go?to=https%3A%2F%2Fflutter.dev%2Fdocs%2Fdevelopment%2Fpackages-and-plugins%2Fdeveloping-packages%23developing-plugin-packages
[2a68e737e686ee3693ea596393512a4a.png]: /images/20221120/3daf54c6b3244a2b8c3e22ed8640f5f8.png
[b5bb28c8e75bdd2262818eea1f8b869e.png]: /images/20221120/c817a60431f24c19a546b42b6c7a333f.png
[Link 2]: https://links.jianshu.com/go?to=https%3A%2F%2Fflutter.dev%2Fdocs%2Fdevelopment%2Fpackages-and-plugins%2Fusing-packages
[pub.dev]: https://links.jianshu.com/go?to=https%3A%2F%2Fpub.dev
[github]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fliusilong%2Fflutter_plugin_demo