Flutter 插件 (Plugins) 專案範例

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

1.  建立新的Flutter專案

  1-1.  開啟命令介面

raw-image
raw-image

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

raw-image

  1-3.  輸入專案名稱

raw-image

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"字串。

raw-image
raw-image
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 . " 指令後建立 GNU C++ 語言的類別函式來串接Dart 類別的程式。

raw-image
raw-image

  4.  windows 目錄 

    此目錄是根據 pubspec.yaml 和 flutter_plugin.dart 的內容在執行 "flutter create --template=plugin --platforms=windows . " 指令後建立Visual C++ 語言的類別函式來串接 Dart 類別的程式。

raw-image
raw-image

  5.  android 目錄

    此目錄是根據 pubspec.yaml 和 flutter_plugin.dart 的內容在執行 "flutter create --template=plugin --platforms=android . " 指令後建立Kotlin 語言的類別函式來串接 Dart 類別的程式。

raw-image
raw-image


  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中依據指定平台所定義的類別名稱,而且名稱必須是符合原先定義類別名稱 + "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物件和此物件顯示的字串包含 "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

raw-image
raw-image

  4-2.  Chrome Web

raw-image
raw-image

  4-3.  Linux APP (Ubuntu)

raw-image
raw-image

  4-4.  Android APP

raw-image
raw-image
留言
avatar-img
留言分享你的想法!
avatar-img
跨碼軟體有限公司的沙龍
4會員
9內容數
2022/04/22
  雖然Dart 語言本身支援跨平台的編譯方式,但在實務開發時還是不免需要使用外部非Dart語言所提供的函式庫進行功能開發且由於C 語言是最為廣泛且通用的程式語言,因此Dart語言也有提供支援與C語言函式庫互通性的方式;本篇主要是以MSVC作為C的編譯器來實作說明如何引用C語言會遇到的作法。
Thumbnail
2022/04/22
  雖然Dart 語言本身支援跨平台的編譯方式,但在實務開發時還是不免需要使用外部非Dart語言所提供的函式庫進行功能開發且由於C 語言是最為廣泛且通用的程式語言,因此Dart語言也有提供支援與C語言函式庫互通性的方式;本篇主要是以MSVC作為C的編譯器來實作說明如何引用C語言會遇到的作法。
Thumbnail
2022/02/13
本範例主要說明如何運用Flutter 繪圖與動態相關的API並搭配provider套件進行實作輪盤賭選擇 ( Roulette Wheel Selection ) 程式。
Thumbnail
2022/02/13
本範例主要說明如何運用Flutter 繪圖與動態相關的API並搭配provider套件進行實作輪盤賭選擇 ( Roulette Wheel Selection ) 程式。
Thumbnail
2022/01/24
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
2022/01/24
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
看更多
你可能也想看
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
這篇使用pubspec.yaml來管理第三方依賴套件。YAML是一種直覺、可讀性高的文件格式;他和xml或Json相比語法簡單且容易解析,所以常用於配置文件。 Flutter預設的設定檔是pubspec.yaml,底下是關鍵字解釋: name:應用程式或套件名稱。 description: 應用
Thumbnail
這篇使用pubspec.yaml來管理第三方依賴套件。YAML是一種直覺、可讀性高的文件格式;他和xml或Json相比語法簡單且容易解析,所以常用於配置文件。 Flutter預設的設定檔是pubspec.yaml,底下是關鍵字解釋: name:應用程式或套件名稱。 description: 應用
Thumbnail
Introduction Flutter is a powerful framework for developing the app for different platforms without redevelopment. main.dart route routing map
Thumbnail
Introduction Flutter is a powerful framework for developing the app for different platforms without redevelopment. main.dart route routing map
Thumbnail
如果你是剛入門Flutter的工程師,可以參考這篇文章,我會告訴大家自己常用的套件以及如何規劃檔案的分類!
Thumbnail
如果你是剛入門Flutter的工程師,可以參考這篇文章,我會告訴大家自己常用的套件以及如何規劃檔案的分類!
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
說明Flutter 插件(Plugin)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
說明Flutter 插件(Plugin)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
說明Flutter 包(Package)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
說明Flutter 包(Package)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
說明Flutter 骨架(skeleton)專案範例的架構與在各平台執行的顯示畫面
Thumbnail
說明Flutter 骨架(skeleton)專案範例的架構與在各平台執行的顯示畫面
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News