Flutter 插件 (Plugins) 專案範例

更新於 2022/03/30閱讀時間約 34 分鐘
Flutter 的插件 (Plugin) 專案範例提供建立插件(Plugin)的專案架構,而插件 ( Plugin )是一種特殊的Dart 包 (Package) 可以結合 Dart 碼和不同平台的程式語言。

1.  建立新的Flutter專案

  1-1.  開啟命令介面

  1-2.  選擇建立插件(Plugin) 專案類型

  1-3.  輸入專案名稱

2.  Flutter 預設插件專案的檔案架構

在選擇建立新的插件專案後會自動產生相關的檔案及目錄,主要的檔案如下:

  2-1.  lib 目錄

    主要存放開發程式碼的目錄,而此範例中只提供一個簡單的範例程式檔案 。
  1.  flutter_plugin.dart
    定義提供服務的插件(Plugin)類別,此類別主要是作為flutter 串接Dart 與執行各平台程式碼的包裝(Wrapper)程式。
import 'dart:async';
import 'package:flutter/services.dart';
class FlutterPlugin {
  static const MethodChannel _channel = MethodChannel('flutter_plugin');
  static Future<String?> get platformVersion async {
    final String? version = await _channel.invokeMethod('getPlatformVersion');
    return version;
  }
}
  2.  flutter_plugin_web.dart
     此檔案是根據pubspec.yaml和flutter_plugin.dart的內容在執行 "flutter create --template=plugin --platforms=web . " 指令產生出來且類別名稱會在原本的類別名稱上加入"Web"字串。
import 'dart:async';
import 'dart:html' as html show window;
import 'package:flutter/services.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';
class FlutterPluginWeb {
  static void registerWith(Registrar registrar) {
    final MethodChannel channel = MethodChannel(
      'flutter_plugin',
      const StandardMethodCodec(),
      registrar,
    );
    final pluginInstance = FlutterPluginWeb();
    channel.setMethodCallHandler(pluginInstance.handleMethodCall);
  }
  Future<dynamic> handleMethodCall(MethodCall call) async {
    switch (call.method) {
      case 'getPlatformVersion':
        return getPlatformVersion();
      default:
        throw PlatformException(
          code: 'Unimplemented',
          details: 'flutter_plugin for web doesn\'t implement \'${call.method}\'',
        );
    }
  }
  Future<String> getPlatformVersion() {
    final version = html.window.navigator.userAgent;
    return Future.value(version);
  }
}
  3.  linux 目錄
    此目錄是根據 pubspec.yaml 和 flutter_plugin.dart 的內容在執行 "flutter create --template=plugin --platforms=linux . &quot; 指令後建立 GNU C++ 語言的類別函式來串接Dart 類別的程式。
  4.  windows 目錄 
    此目錄是根據 pubspec.yaml 和 flutter_plugin.dart 的內容在執行 "flutter create --template=plugin --platforms=windows . " 指令後建立Visual C++ 言的類別函式來串接 Dart 類別的程式。
  5.  android 目錄
    此目錄是根據 pubspec.yaml 和 flutter_plugin.dart 的內容在執行 "flutter create --template=plugin --platforms=android . " 指令後建立Kotlin 言的類別函式來串接 Dart 類別的程式。

  2-2.  test 目錄

    主要存放使用Flutter提供的 test 測試函數對於類別庫(library)所提供的物件進行驗證程式。
  1.  flutter_plugin_test.dart
    測試 flutter_plugin 檔案中定義的FlutterPlugin類別是否能在不同平台上正確的執行與回傳預期資料型態。
import 'package:flutter/services.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_plugin/flutter_plugin.dart';
void main() {
  const MethodChannel channel = MethodChannel('flutter_plugin');
  TestWidgetsFlutterBinding.ensureInitialized();
  setUp(() {
    channel.setMockMethodCallHandler((MethodCall methodCall) async {
      return ';42';
    });
  });
  tearDown(() {
    channel.setMockMethodCallHandler(null);
  });
  test('getPlatformVersion', () async {
    expect(await FlutterPlugin.platformVersion, '42');
  });
} 

  2-3.  pubspec.yaml檔案

    flutter 專案中的檔案配置檔,除了設定基本專案資訊並可設定專案中使用到的相依類別庫或外部資源。
name: flutter_plugin
description: A new flutter plugin project.
version: 0.0.1
homepage:
environment:
  sdk: ">=2.15.1 <3.0.0"
  flutter: ">=2.5.0"
dependencies:
  flutter:
    sdk: flutter
  flutter_web_plugins:
    sdk: flutter
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^1.0.0
flutter:
  plugin:
    platforms:
      windows:
        pluginClass: FlutterPlugin
      android:
        pluginClass: FlutterPlugin
        package: com.example.flutter_plugin
      web:
        pluginClass: FlutterPluginWeb
        fileName: flutter_plugin_web.dart
      linux:
        pluginClass: FlutterPlugin

  2-4.  .packages檔案

    flutter 專案中設定相依類別庫檔案路徑的組態檔,建立專案的預設檔案路徑為 flutter_plugin:lib/ 而此檔案是在執行"flutter pub get"指令後根據 pubspec.yaml中的內容產生出來,設定引用類別庫格式為【路徑別名:實際路徑】。
async:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/async-2.8.2/lib/
boolean_selector:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/boolean_selector-2.1.0/lib/
characters:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/characters-1.2.0/lib/
charcode:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/charcode-1.3.1/lib/
clock:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/clock-1.1.0/lib/
collection:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/collection-1.15.0/lib/
cupertino_icons:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/cupertino_icons-1.0.4/lib/
fake_async:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/fake_async-1.2.0/lib/
flutter:file:///D:/flutter_windows_2.8.1-stable/flutter/packages/flutter/lib/
flutter_lints:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_lints-1.0.4/lib/
flutter_plugin:../lib/
flutter_test:file:///D:/flutter_windows_2.8.1-stable/flutter/packages/flutter_test/lib/
flutter_web_plugins:file:///D:/flutter_windows_2.8.1-stable/flutter/packages/flutter_web_plugins/lib/
js:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/js-0.6.3/lib/
lints:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/lints-1.0.1/lib/
matcher:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/matcher-0.12.11/lib/
meta:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/meta-1.7.0/lib/
path:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/path-1.8.0/lib/
sky_engine:file:///D:/flutter_windows_2.8.1-stable/flutter/bin/cache/pkg/sky_engine/lib/
source_span:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/source_span-1.8.1/lib/
stack_trace:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/stack_trace-1.10.0/lib/
stream_channel:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/stream_channel-2.1.0/lib/
string_scanner:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/string_scanner-1.1.0/lib/
term_glyph:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/term_glyph-1.2.0/lib/
test_api:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/test_api-0.4.3/lib/
typed_data:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/typed_data-1.3.0/lib/
vector_math:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/vector_math-2.1.1/lib/
flutter_plugin_example:lib/

3.  Flutter 插件載入範例專案的檔案架構

  在選擇建立新的插件專案後會自動產生載入插件的範例應用程式檔案及目錄,主要的檔案如下:

  3-1.  example\lib 目錄

    主要存放開發程式碼的目錄,main.dart 中的 main 函式為啟動程式的入口函式,而此範例程式是說明如何載入自訂插件(Plugin)及執行自訂類別與函式的方法。
  1.  main.dart
  使用非同步的方式執行 flutter_plugin 檔案中定義 FlutterPlugin 類別的取得執行平台版本函式結果顯示於營幕上。
import 'package:flutter/material.dart';
import 'dart:async';
import 'packge:flutter/services.dart';
import 'package:flutter_plugin/flutter_plugin.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  @override
  void initState() {
    super.initState();
    initPlatformState();
  }
  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion =
        await FlutterPlugin.platformVersion ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }
     
    if (!mounted) return;
      
    setState(() {
      _platformVersion = platformVersion;
    });
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Text('Running on: $_platformVersion\n'),
        ),
      ),
  );}
}
  2.  generated_plugin_registrant.dart
  此檔案是根據 pubspec.yaml flutter_plugin.dart 的內容在執行 "flutter create --template=plugin --platforms=web . " 指令產生出來且類別名稱是根據插件 (Plugin) 的 pubspec.yaml中依據指定平台所定義的類別名稱,而且名稱必須是符合原先定義類別名稱 + &quot;Web"字串的格式。
import 'package:flutter_plugin/flutter_plugin_web.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';
void registerPlugins(Registrar registrar) {
  FlutterPluginWeb.registerWith(registrar);
  registrar.registerMessageHandler();
}

  3-2.  example\test 目錄

    主要存放使用Flutter提供的 test 測試函數對於類別庫(library)所提供的物件進行驗證程式。
  1.  widget_test.dart
  使用testWidgets函式測試 flutter_plugin 檔案中定義的FlutterPlugin類別在載入後在不同的平台上執行是否會影響應用程式的執行,因此此程式只是確認在建立此應用程式後是否在介面上有產生 textWidget物件和此物件顯示的字串包含 &quot;Running on:"。
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_plugin_example/main.dart';
void main() {
  testWidgets('Verify Platform version', (WidgetTester tester) async {
  
    await tester.pumpWidget(const MyApp());
    expect(
      find.byWidgetPredicate(
        (Widget widget) => widget is Text &&
          widget.data!.startsWith('Running on:'),
      ),
      findsOneWidget,
    );
  });
}

  3-3.  example\pubspec.yaml檔案

    flutter 專案中的檔案配置檔,除了設定基本專案資訊並可設定專案中使用到的相依類別庫或外部資源;而使用插件( Plugin) 時需要設定載入插件 (Plguin) 的檔案名稱與路徑在使用插件 (Plugin) 專案的pubspec.yaml。
name: flutter_plugin_example
description: Demonstrates how to use the flutter_plugin plugin.
publish_to: 'none'
environment:
  sdk: ">=2.15.1 <3.0.0"
dependencies:
  flutter:
    sdk: flutter
  flutter_plugin:   
    path: ../
 
  cupertino_icons: ^1.0.2
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^1.0.0
flutter:
  uses-material-design: true

  3-4.  example\.packages檔案

    flutter 專案中設定相依類別庫檔案路徑的組態檔,建立專案的預設檔案路徑為 flutter_plugin_example:lib/ 而此檔案是在執行"flutter pub get"指令後根據 pubspec.yaml中的內容產生出來,設定引用類別庫格式為【路徑別名:實際路徑】。
async:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/async-2.8.2/lib/
boolean_selector:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/boolean_selector-2.1.0/lib/
characters:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/characters-1.2.0/lib/
charcode:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/charcode-1.3.1/lib/
clock:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/clock-1.1.0/lib/
collection:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/collection-1.15.0/lib/
cupertino_icons:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/cupertino_icons-1.0.4/lib/
fake_async:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/fake_async-1.2.0/lib/
flutter:file:///D:/flutter_windows_2.8.1-stable/flutter/packages/flutter/lib/
flutter_lints:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_lints-1.0.4/lib/
flutter_plugin:../lib/
flutter_test:file:///D:/flutter_windows_2.8.1-stable/flutter/packages/flutter_test/lib/
flutter_web_plugins:file:///D:/flutter_windows_2.8.1-stable/flutter/packages/flutter_web_plugins/lib/
js:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/js-0.6.3/lib/
lints:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/lints-1.0.1/lib/
matcher:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/matcher-0.12.11/lib/
meta:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/meta-1.7.0/lib/
path:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/path-1.8.0/lib/
sky_engine:file:///D:/flutter_windows_2.8.1-stable/flutter/bin/cache/pkg/sky_engine/lib/
source_span:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/source_span-1.8.1/lib/
stack_trace:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/stack_trace-1.10.0/lib/
stream_channel:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/stream_channel-2.1.0/lib/
string_scanner:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/string_scanner-1.1.0/lib/
term_glyph:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/term_glyph-1.2.0/lib/
test_api:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/test_api-0.4.3/lib/
typed_data:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/typed_data-1.3.0/lib/
vector_math:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/vector_math-2.1.1/lib/
flutter_plugin_example:lib/

4.  執行各平台Flutter 偵錯自訂包(Package)

  點選右下角No Devices項目後切換至要執行偵錯的平台並執行 Run -> Start Debugging (F5) 進行偵錯

  4-1.  Windows Desktop

  4-2.  Chrome Web

  4-3.  Linux APP (Ubuntu)

  4-4.  Android APP

留言0
查看全部
avatar-img
發表第一個留言支持創作者!
說明Flutter 包(Package)專案範例的架構與實際載入並執行在各平台的顯示畫面
說明Flutter 骨架(skeleton)專案範例的架構與在各平台執行的顯示畫面
說明Flutter 應用軟體(Application)專案範例的架構與在各平台執行的顯示畫面
說明如何在Windows系統中安裝 Flutter 與 Visual Studio Code 的開發環境
說明如何在Linux系統中安裝 Flutter 與 Visual Studio Code 開發環境
說明Flutter 包(Package)專案範例的架構與實際載入並執行在各平台的顯示畫面
說明Flutter 骨架(skeleton)專案範例的架構與在各平台執行的顯示畫面
說明Flutter 應用軟體(Application)專案範例的架構與在各平台執行的顯示畫面
說明如何在Windows系統中安裝 Flutter 與 Visual Studio Code 的開發環境
說明如何在Linux系統中安裝 Flutter 與 Visual Studio Code 開發環境
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
Flutter is a powerful, open-source UI software development kit created by Google.
Thumbnail
解析成List List items=json.decode(jsonStr); print(items[0]["your_key"]); 解析成Map Map<String, dynamic> user = json.decode(json); print('${user['your_k
Thumbnail
這邊會使用WebSocketChannel去與http://www.websocket.org做連線。 連線 final channel = IOWebSocketChannel.connect('wss://echo.websocket.events'); 接收 StreamBui
Thumbnail
Dio是一個Dart Http請求庫,支援Restful API、FormData、攔截器、請求取消、Cookie管理、檔案上傳/下載、逾時等。 加入 dependencies: dio: ^x.x.x #请使用pub上的最新版本 使用 GET Response response;
Thumbnail
配置 idleTimeout:在httpClient請求結束後,會繼續保持連線,直到超過idleTimeout值才會關閉連接。 connectionTimeout:和伺服器建立連線逾時,如果超過connectionTimeout值則會拋出SocketException異常。 maxConnec
Thumbnail
眼中的世界C路線更新後,打算讓自己休息個幾天再來繼續做D路線。 於是在這次中秋連假稍微看了一下RMMZ的腳本,當作是個練習。 這邊做個簡介,順便附上插件位置。 首先我們定義了8方向移動的基本開關,當開啟時 game player 就可以取得8方向的數值(內建4方向可以取得 2/ 4 / 6 /8
Thumbnail
Flutter是一個由Google開發的原生跨平台框架,使用的是Dart語言,可以寫一份code產生IOS&Android App 甚至還可以產生Web以及桌面應用程式。 推薦這個由Dr. Angela Yu在Udemy上架的Flutter課程,雖然是英文教學但是其實很好懂。
Thumbnail
這裡收錄簡單的插件翻譯,僅翻譯插件介紹、簡單使用及名稱。
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
Flutter is a powerful, open-source UI software development kit created by Google.
Thumbnail
解析成List List items=json.decode(jsonStr); print(items[0]["your_key"]); 解析成Map Map<String, dynamic> user = json.decode(json); print('${user['your_k
Thumbnail
這邊會使用WebSocketChannel去與http://www.websocket.org做連線。 連線 final channel = IOWebSocketChannel.connect('wss://echo.websocket.events'); 接收 StreamBui
Thumbnail
Dio是一個Dart Http請求庫,支援Restful API、FormData、攔截器、請求取消、Cookie管理、檔案上傳/下載、逾時等。 加入 dependencies: dio: ^x.x.x #请使用pub上的最新版本 使用 GET Response response;
Thumbnail
配置 idleTimeout:在httpClient請求結束後,會繼續保持連線,直到超過idleTimeout值才會關閉連接。 connectionTimeout:和伺服器建立連線逾時,如果超過connectionTimeout值則會拋出SocketException異常。 maxConnec
Thumbnail
眼中的世界C路線更新後,打算讓自己休息個幾天再來繼續做D路線。 於是在這次中秋連假稍微看了一下RMMZ的腳本,當作是個練習。 這邊做個簡介,順便附上插件位置。 首先我們定義了8方向移動的基本開關,當開啟時 game player 就可以取得8方向的數值(內建4方向可以取得 2/ 4 / 6 /8
Thumbnail
Flutter是一個由Google開發的原生跨平台框架,使用的是Dart語言,可以寫一份code產生IOS&Android App 甚至還可以產生Web以及桌面應用程式。 推薦這個由Dr. Angela Yu在Udemy上架的Flutter課程,雖然是英文教學但是其實很好懂。
Thumbnail
這裡收錄簡單的插件翻譯,僅翻譯插件介紹、簡單使用及名稱。