在 Flutter 項(xiàng)目的開發(fā)中,我們需要根據(jù)自己的業(yè)務(wù)需求來創(chuàng)建各種各樣的插件,這里記錄下關(guān)于 Flutter 插件的創(chuàng)建及使用的過程。
這里主要記錄如下幾點(diǎn): - 插件的創(chuàng)建 - 獲取 Android 中的上下文 Context - Dart 調(diào)用插件方法及傳參 - 插件調(diào)用 Dart 的方法及傳參 - 插件中監(jiān)聽 Activity 的生命周期及常用的回調(diào)方法 - 使用 Delegate 的方式來寫插件 - 插件的幾種依賴方式(pub、本地、git) - 插件的上傳及注意事項(xiàng)
插件的創(chuàng)建
我們可以通過兩種方式來創(chuàng)建插件,一種是使用 IDE(Android Studio 或者 Idea)來創(chuàng)建;另一種是通過命令來創(chuàng)建。
使用 IDE 創(chuàng)建插件
在菜單欄中選擇 File -> New -> New Flutter Project 會(huì)出現(xiàn)如下界面

選中 Flutter Plugin 然后一路 Next 就可以了。
使用命令創(chuàng)建插件
flutter create --org com.example --template=plugin plugin_name
其中 com.example 是插件包名的一部分,plugin_name 是插件的名稱。插件的完整包名為 com.example.plugin_name
插件的目錄結(jié)構(gòu)
使用上述兩種方式中的任一種創(chuàng)建完成之后,插件的目錄結(jié)構(gòu)如下:

圖中包含的幾個(gè)主要的目錄分別為 android,example,ios,lib 這四個(gè)目錄: - android 目錄是一個(gè)完整的 Android 工程,用來開發(fā) Android 端的插件功能 - example 目錄用來測(cè)試 Android 或者 IOS 端的插件功能 - ios 目錄是一個(gè)完整的 IOS 工程,用來開發(fā) IOS 端的插件功能 - lib 目錄中的文件負(fù)責(zé)和 Android 或者 IOS 端的交互
獲取 Android 中的上下文 Context
當(dāng)我們創(chuàng)建好插件之后,Android 工程 里面會(huì)有一個(gè)生成好的文件,這里是 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) {
// 省略部分代碼
}
}
這個(gè)類中有一個(gè)與 Dart 層對(duì)應(yīng)的 MethodChannel。
這個(gè)時(shí)候,如果我們添加一個(gè)彈出 Toast 的方法。Toast 需要一個(gè) Context 類型的參數(shù),但是這個(gè)類中是沒有提供類似 this.getContext() 的方法來提供。這個(gè)時(shí)候,需要使用Registrar 這個(gè)類來獲取 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();
}
}
}
對(duì)應(yīng)的,在 flutter_plugin_demo.dart 文件中需要新增一個(gè)方法來觸發(fā)彈出 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 工程中的去調(diào)用:
floatingActionButton: FloatingActionButton(
onPressed: () async {
/// 調(diào)用插件的 Toast 功能
await FlutterPluginDemo.showToast();
},
child: Icon(Icons.add),
),
Dart 調(diào)用原生方法時(shí)傳遞參數(shù)
將上述的 showToast 方法改成接收一個(gè)參數(shù)的方法:
/// [message] Toast 的內(nèi)容
static Future<void> showToast({String message}) async {
await _channel.invokeMethod("showToast", message);
}
在 Java 層就需要接收這個(gè)參數(shù):
String message = String message = call.arguments();
Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
有時(shí)候需要傳遞好多個(gè)參數(shù),這個(gè)時(shí)候可以傳遞一個(gè) Map,如下:
/// 傳遞 map 類型的參數(shù)
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 層發(fā)送通知
這里我們使用 EventChannel 來讓原生向 Dart 層發(fā)送通知,使用 EventChannel 的步驟如下:
- Dart 層定義一個(gè) EventChannel
- Dart 層監(jiān)聽該 EventChannel,用來接收該 EventChannel 上的事件
- 原生端定義一個(gè) EventChannel
- 原生端向 Dart 層發(fā)送消息
Dart 層定義 EventChannel
static const EventChannel _eventChannel = EventChannel("flutter_plugin_event");
Dart 層監(jiān)聽該 EventChannel
// 這里的 data 就是原生端發(fā)送過來的數(shù)據(jù)
_eventChannel.receiveBroadcastStream().listen((data) {
//streamController.sink.add(data);
});
原生端定義 EventChannel
原生端里面,首先需要定義一個(gè) EventChannel ,然后需要為其設(shè)置一個(gè) StreamHandler,在 StreamHandler 的 onListen 方法中會(huì)有一個(gè) EventChannel.EventSink 的參數(shù),這個(gè)參數(shù)可以用來向 Dart 層發(fā)送消息。
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 層發(fā)送消息
// 通知 Dart 層
if (null != eventSink) {
eventSink.success("Dart 調(diào)用 原始方法成功");
}
插件中監(jiān)聽 Activity 常用的生命周期方法的回調(diào)
生命周期方法回調(diào)
有時(shí)候我們需要在 Activity 的生命周期方法中干一些事,比如友盟統(tǒng)計(jì)的時(shí)候,就需要在Activity 的 onResume()和 onPause() 中添加一些代碼;
要監(jiān)聽 onCreate(),onStart(),onResume() 等 方法的回調(diào),需要借助 Application.ActivityLifecycleCallbacks 這個(gè)接口。
首先寫一個(gè)類 LifeCycleCallbacks 來 實(shí)現(xiàn) Application.ActivityLifecycleCallbacks 這個(gè)接口,然后將其注冊(cè)到 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);
}
所以我們只需要寫一個(gè)類來實(shí)現(xiàn)它就可以了。然后在對(duì)應(yīng)的方法里面寫對(duì)應(yīng)的代碼。
接著就是注冊(cè)了:
public FlutterPluginDemoPlugin(Registrar registrar) {
...
...
// 注冊(cè)聲明周期方法的監(jiān)聽
((Application) registrar.context())
.registerActivityLifecycleCallbacks(new LifeCycleCallbacks());
}
最后在 onActivityDestroyed 生命周期方法中解注冊(cè)
class LifeCycleCallbacks implements Application.ActivityLifecycleCallbacks {
...
...
@Override
public void onActivityDestroyed(Activity activity) {
if (activity == registrar.activity()) {
((Application) registrar.context()).unregisterActivityLifecycleCallbacks(this);
}
}
}
權(quán)限監(jiān)聽回調(diào)
public FlutterPluginDemoPlugin(Registrar registrar) {
...
...
// 權(quán)限監(jiān)聽回調(diào)
registrar.addRequestPermissionsResultListener(new PluginRegistry.RequestPermissionsResultListener() {
@Override
public boolean onRequestPermissionsResult(int i, String[] strings, int[] ints) {
return false;
}
});
}
startActivityForResult 的回調(diào)
public FlutterPluginDemoPlugin(Registrar registrar) {
...
...
// startActivityForResult 回調(diào)
registrar.addActivityResultListener(new PluginRegistry.ActivityResultListener() {
@Override
public boolean onActivityResult(int requestCode, int responseCode, Intent intent) {
return false;
}
});
}
編寫一個(gè) Delegate 類來處理業(yè)務(wù)邏輯
上一小節(jié)中,我們?cè)?FlutterPluginDemoPlugin這一個(gè)類中處理 Activity 的聲明周期的回調(diào)方法,權(quán)限申請(qǐng)的回調(diào)方法,Activity 跳轉(zhuǎn)的回調(diào)方法。這個(gè)時(shí)候,FlutterPluginDemoPlugin 這個(gè)類的代碼就會(huì)顯得非常的多。
我們可以寫一個(gè)類來幫助插件類處理這些事情,這里寫一個(gè) PluginDelegate 類來實(shí)現(xiàn)這個(gè)功能:
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 類實(shí)現(xiàn)了上一小節(jié)中需要處理的三種回調(diào)的接口,那么我們?cè)?FlutterPluginDemoPlugin 插件類中就可以這樣:
public class FlutterPluginDemoPlugin implements MethodCallHandler {
...
...
private final PluginDelegate delegate;
// 構(gòu)造方法
public FlutterPluginDemoPlugin(Registrar registrar, PluginDelegate delegate) {
...
this.delegate = delegate;
...
// 聲明周期回調(diào)
((Application) context).registerActivityLifecycleCallbacks(delegate);
// 權(quán)限聲明回調(diào)
registrar.addRequestPermissionsResultListener(delegate);
// 頁(yè)面跳轉(zhuǎn)回調(diào)
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) {
// 調(diào)用代理類方法演示
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 依賴
很多時(shí)候,pub 上的某個(gè)插件并不能完全滿足我們實(shí)際的業(yè)務(wù)需求,如 UI 或者一些邏輯問題,這個(gè)時(shí)候我們可以將其源碼下載下來,然后根據(jù)自己的業(yè)務(wù)需求對(duì)其進(jìn)行修改。改完之后通常會(huì)上傳到公司的私有倉(cāng)庫(kù)中(GitHub 或者 GitLab),然后在工程中就需要依賴私有倉(cāng)庫(kù)中的庫(kù)
dependencies:
toast:
git:
url: http://xxx/toast.git
還可能依賴該倉(cāng)庫(kù)指定分支上的代碼,如依賴遠(yuǎn)程 dev 分支上的代碼
dependencies:
toast:
git:
ref: dev
url: http://xxx/toast.git
本地依賴
有時(shí)候需要在項(xiàng)目中測(cè)試本地的某個(gè)插件,這個(gè)時(shí)候就可以使用本地依賴的方式來依賴插件
dependencies:
toast:
path: user/xxx/toast/
插件的上傳
這里是上傳到 pub.dev 上面
在上傳之前使用如下命令檢查插件中的一些問題:
flutter packages pub publish --dry-run
還需要做的就是上傳前的需要清理插件,避免插件過大無法上傳
flutter clean
使用如下命令進(jìn)行插件的上傳
flutter packages pub publish