Flutter 插件的创建及使用

作者: c263ae2147d8 | 来源:发表于2019-10-09 23:23 被阅读0次

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

官方文档

这里主要记录如下几点：

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

插件的创建

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

使用 IDE 创建插件

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

image

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

使用命令创建插件

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

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

插件的目录结构

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

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);
        }
    }
}

插件的依赖方式

官方文档

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

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 插件的创建及使用

插件的创建

使用 IDE 创建插件

使用命令创建插件

插件的目录结构

获取 Android 中的上下文 Context

Dart 调用原生方法时传递参数

原生向 Dart 层发送通知

Dart 层定义 EventChannel

Dart 层监听该 EventChannel

原生端定义 EventChannel

原生端向 Dart 层发送消息

插件中监听 Activity 常用的生命周期方法的回调

生命周期方法回调

权限监听回调

startActivityForResult 的回调

编写一个 Delegate 类来处理业务逻辑

插件的依赖方式

pub 依赖

git 依赖

本地依赖

插件的上传

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Flutter圈子

Flutter玩转大前端

Flutter中文社区

Flutter

Flutter