Flutter 外掛的建立及使用
在 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 地址
6人點贊
作者:c263ae2147d8
連結:https://www.jianshu.com/p/b4f32769a7f0
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。
相關文章
- Flutter 如何建立私有公共外掛Flutter
- Flutter 外掛 webview_flutter 使用指北FlutterWebView
- Flutter個人外掛使用整理Flutter
- 使用podspec建立iOS外掛iOS
- flutter外掛Flutter
- flutter外掛編寫及釋出流程Flutter
- [Flutter翻譯]如何用Flutter 2.2.3建立Chrome擴充套件外掛FlutterChrome套件
- 使用 Github Action 釋出 Flutter 外掛GithubFlutter
- Flutter 外掛使用必知必會Flutter
- 使用Markdown建立PPT的VS Code外掛
- Nuxt Kit 中的外掛:建立與使用UX
- Flutter外掛釋出及Flutter APP啟動原始碼探索FlutterAPP原始碼
- 使用Autodesk Vault外掛嚮導輕鬆建立Vault外掛
- Eclipse安裝lombok外掛及外掛使用案例EclipseLombok
- Flutter外掛之webview_flutter簡要使用說明FlutterWebView
- flutter使用platform-channels製作外掛FlutterPlatform
- Flutter外掛開發Flutter
- flutter 外掛開發Flutter
- 建立 wordpress 外掛
- Flutter 最好的導航外掛Flutter
- flutter分享外掛:flutter_share_meFlutter
- 【譯】使用Vue建立一個Excel外掛VueExcel
- hibernateTools外掛安裝及使用
- flutter: SharedPreferences桌面外掛Flutter
- Flutter之初識iOS外掛FlutteriOS
- Flutter版聚合廣告外掛Flutter
- 如何建立Cordova外掛
- Flutter開發之Flutter外掛開發Flutter
- Flutter打包AAR外掛之fat-aar使用教程Flutter
- MyBatis逆向工 maven外掛 generator 的配置及使用MyBatisMaven
- fastadmin的【外掛管理】外掛使用教程AST
- flutter---->阿里雲oss的外掛Flutter阿里
- Flutter 原生外掛開發流程Flutter
- Flutter外掛開發---iOS篇FlutteriOS
- 在Flutter中使用Fluro外掛進行路由跳轉Flutter路由
- PhotoSwipe外掛的使用
- HtmlWebpackPlugin外掛和HtmlWebpackInlineSourcePlugin外掛的使用HTMLWebPlugininline
- Firefox瀏覽器的安裝及外掛使用Firefox瀏覽器