Flutter外掛開發指南01: 通道Channel的編寫與實現

發表於2024-02-20
Flutter

Flutter外掛開發指南01: 通道Channel的編寫與實現

圖片

影片
https://www.bilibili.com/video/BV1ih4y1E7E3/
前言
本文將會透過一個加法計算，來實現 Channel 的雙向通訊，讓大家有個一個體會。

圖片

Flutter外掛
Flutter外掛是Flutter應用程式與原生平臺之間的橋樑，使得Flutter應用程式可以與原生程式碼進行互動，從而擴充套件Flutter應用程式的功能和能力。Flutter外掛通常包括Dart和原生程式碼（例如Java、Kotlin或Objective-C、Swift等），並可以透過Flutter外掛框架來註冊、管理和呼叫。
在整個Flutter架構中，Flutter外掛具有非常重要的作用和重要性。以下是Flutter外掛在Flutter架構中的一些重要作用：

擴充套件Flutter應用程式的功能：Flutter外掛可以提供許多原生平臺的功能和能力，例如訪問原生裝置API、訪問原生UI元件等。透過使用Flutter外掛，Flutter應用程式可以獲得更多的功能和能力，從而可以更好地滿足使用者需求。提高Flutter應用程式的效能：透過使用Flutter外掛，Flutter應用程式可以透過原生平臺API來執行某些任務，從而可以提高應用程式的效能和響應速度。例如，使用原生平臺的影像處理庫來處理大量影像資料。與原生程式碼進行互動：Flutter外掛可以使Flutter應用程式與原生程式碼之間進行雙向通訊，從而可以讓Flutter應用程式與原生平臺進行無縫整合。這對於需要與現有原生應用程式整合的Flutter應用程式來說尤為重要。促進Flutter生態系統的發展：Flutter外掛可以提供許多不同型別的功能和能力，例如訪問原生裝置感測器、訪問原生廣告庫等。透過將這些外掛共享給其他Flutter開發者，Flutter外掛可以促進Flutter生態系統的發展和壯大，使得更多的開發者能夠使用Flutter來構建高質量的應用程式。
Channel 通道

圖片

Channel是Flutter應用程式與原生平臺之間進行通訊的橋樑。Flutter應用程式和原生平臺可以透過Channel來交換訊息和資料，從而實現雙向通訊。Flutter外掛通常包含一個或多個Channel，用於與原生程式碼互動。
Channel在Flutter外掛開發中的作用有以下幾個方面：

提供雙向通訊：Channel提供了Flutter應用程式與原生平臺之間進行雙向通訊的能力。Flutter應用程式可以向原生平臺傳送訊息和資料，原生平臺也可以向Flutter應用程式傳送訊息和資料。管理方法呼叫：Channel可以用於管理Flutter應用程式和原生平臺之間的方法呼叫。Flutter應用程式可以透過Channel呼叫原生平臺的方法，原生平臺也可以透過Channel呼叫Flutter應用程式的方法。實現資料傳輸：Channel可以用於在Flutter應用程式和原生平臺之間傳輸資料。Flutter應用程式可以透過Channel向原生平臺傳送資料，原生平臺也可以透過Channel向Flutter應用程式傳送資料。擴充套件Flutter應用程式的功能：透過使用Channel，Flutter應用程式可以訪問原生平臺的功能和能力，例如訪問原生裝置API、訪問原生UI元件等。這可以擴充套件Flutter應用程式的功能和能力，從而可以更好地滿足使用者需求。

原文 https://ducafecat.com/blog/flutter-plugin-channel

參考
https://docs.flutter.dev/packages-and-plugins/developing-pack...
步驟
第一步：建立外掛
使用 Android Studio 建立外掛

圖片

專案型別 plugin
選的語言是 java object-c
平臺選了所有 all

建立完成後

圖片

目錄、檔名
說明

ios
原生

android
原生

linux
原生

macos
原生

windows
原生

lib/flutter_plugin_add_platform_interface.dart
功能介面定義

lib/flutter_plugin_add_method_channel.dart
原生功能介面實現

lib/flutter_plugin_add_web.dart
Web功能介面實現

lib/flutter_plugin_add.dart
flutter 介面呼叫類

第二步：編寫 android 程式碼
首先我們用模擬器把 android 專案執行下，讓 android gradle 自動拉取依賴。
選擇 example 來執行。

圖片

開啟專案的正確目錄是 example/android，而不是根目錄的 android，否則依賴包認不出。

圖片

開啟後能正常認出

圖片

如果認不出可以清下快取

圖片

選取清除歷史和快取檔案

圖片

編寫加法計算
android/src/main/java/com/ducafecat/flutter_plugin_add/FlutterPluginAddPlugin.java
  @Override  public void onMethodCall(@NonNull MethodCall call, @NonNull Result result) {    if (call.method.equals("getPlatformVersion")) {      result.success("Android " + android.os.Build.VERSION.RELEASE);    }    // add    else if (call.method.equals("add")) {      int a = call.argument("a");      int b = call.argument("b");      int sum = add(a, b);      result.success(sum);    }    else {      result.notImplemented();    }  }

Flutter應用程式透過MethodChannel向原生平臺傳送方法呼叫請求時。原生平臺收到Flutter應用程式的方法呼叫請求後，根據請求的方法名執行相應的方法後，將執行結果返回給Flutter應用程式。

  private int add(int a, int b) {    return a + b;  }
第三步：編寫 flutter 介面程式碼
介面配置
pubspec.yaml
  plugin:    platforms:      android:        package: com.ducafecat.flutter_plugin_add        pluginClass: FlutterPluginAddPlugin      ios:        pluginClass: FlutterPluginAddPlugin      linux:        pluginClass: FlutterPluginAddPlugin      macos:        pluginClass: FlutterPluginAddPlugin      windows:        pluginClass: FlutterPluginAddPluginCApi      web:        pluginClass: FlutterPluginAddWeb        fileName: flutter_plugin_add_web.dart

platforms 部分定義了 Flutter 外掛在以下不同平臺上的支援：

android：定義了Flutter外掛在Android平臺上的支援，包括外掛的Java包名和外掛的類名。ios：定義了Flutter外掛在iOS平臺上的支援，包括外掛的類名。linux：定義了Flutter外掛在Linux平臺上的支援，包括外掛的類名。macos：定義了Flutter外掛在macOS平臺上的支援，包括外掛的類名。windows：定義了Flutter外掛在Windows平臺上的支援，包括外掛的類名和外掛的C API實現。web：定義了Flutter外掛在Web平臺上的支援，包括外掛的類名和外掛的檔名。

編寫介面定義
lib/flutter_plugin_add_platform_interface.dart
  Future<int?> add(int a, int b) {    throw UnimplementedError('add() has not been implemented.');  }
原生端介面呼叫
lib/flutter_plugin_add_method_channel.dart
  @override  Future<int?> add(int a, int b) async {    final val = await methodChannel.invokeMethod<int>(      'add',      <String, int>{        'a': a,        'b': b,      },    );    return val;  }
flutter 介面呼叫類
lib/flutter_plugin_add.dart
  Future<int?> add(int a, int b) {    return FlutterPluginAddPlatform.instance.add(a, b);  }
第四步：編寫測試例子
example/lib/main.dart
class _MyAppState extends State<MyApp> {  int addResult = 0;
  @override  Widget build(BuildContext context) {    return MaterialApp(      home: Scaffold(        appBar: AppBar(          title: const Text('Plugin example app'),        ),        body: Center(          child: Column(            children: [              Text('Running on: $_platformVersion\n'),              // 加法              Text('add: $addResult'),              ElevatedButton(                onPressed: () async {                  int? val = await _flutterPluginAddPlugin.add(addResult, 1);                  setState(() {                    addResult = val ?? -1;                  });                },                child: const Text('add'),              ),            ],          ),        ),      ),    );  }

_flutterPluginAddPlugin.add 的方式呼叫我們寫的介面

第五步：編寫 ios 程式碼
執行下 ios 自動拉取包，或者手動 pod 拉包
$ cd ios$ pod install
使用 xcode 開啟 example / ios 目錄

圖片

開啟外掛程式碼

圖片

寫入加法程式碼
ios/Classes/FlutterPluginAddPlugin.m
- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {  if ([@"getPlatformVersion" isEqualToString:call.method]) {    result([@"iOS " stringByAppendingString:[[UIDevice currentDevice] systemVersion]]);  }    else if ([@"add" isEqualToString:call.method]) {      int a = [call.arguments[@"a"] intValue];      int b = [call.arguments[@"b"] intValue];      result(@(a + b));  }  else {    result(FlutterMethodNotImplemented);  }}
執行測試

圖片

程式碼
https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_plugin_add
小結
Flutter外掛在Flutter應用程式開發中具有非常重要的作用和重要性，Flutter開發者應該熟悉和掌握Flutter外掛的開發和使用。
大家需要注意這幾點：

外掛 channel 執行過程如何正確的開啟原生專案android ios 原始碼位置哪些重要的函式flutter 中如何配置介面flutter 中編寫介面定義程式碼
感謝閱讀本文
如果我有什麼錯？請在評論中讓我知道。我很樂意改進。

© 貓哥
ducafecat.com
end

相關文章