Flutter 包 (Package) 專案範例

閱讀時間約 23 分鐘
  Flutter 的包(Package)專案範例,提供建立以純Dart語言包(Package)的專案架構。

1.  建立新的Flutter專案

  1-1.  開啟命令介面

  1-2.  選擇建立包(Package) 專案類型

  1-3.  輸入專案名稱

2.  Flutter 預設包專案的檔案架構

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

  2-1.  lib 目錄

    主要存放開發程式碼的目錄,而此範例中只提供一個簡單的範例程式檔案flutter_package.dart 中定義 Caculator 類別提供給外部引用程式使用;   而檔案中使用library關鍵字(Keywords)用來宣告此檔案為類別庫(library)的主檔案且此宣告必須在程式開頭。
library flutter_package;
/// A Calculator.
class Calculator {
  /// Returns [value] plus 1.
  int addOne(int value) => value + 1;
}

  2-2.  test 目錄

    主要存放使用Flutter提供的 test 測試函數對於類別庫(library)所提供的物件進行驗證程式。
  1.  flutter_package_test.dart
  測試由 flutter_package 檔案中所引用的Calculator 類別是否執行正確 ,而測試的方式是藉由輸入不同的值並設定預期回傳的值來判斷是否回傳正確,若不是則會在執行時產生例外。
import 'packag:flutter_test/flutter_test.dart';
import 'package:flutter_package/flutter_package.dart';
void main() {
  test('adds one to input values', () {
      final calculator = Calculator();
        expect(calculator.addOne(2), 3);
        expect(calculator.addOne(-7), -6);
        expect(calculator.addOne(0), 1);
  });
}

  2-3.  pubspec.yaml檔案

    flutter 專案中的檔案配置檔,除了設定基本專案資訊並可設定專案中使用到的相依類別庫或外部資源。
name: flutter_package
description: A new Flutter package project.
version: 0.0.1
homepage:
environment:
  sdk: ">=2.15.1 <3.0.0"
  flutter: ">=1.17.0"
dependencies:
  flutter:
    sdk: flutter
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^1.0.0
flutter:

  2-4.  .packages檔案

    flutter 專案中設定相依類別庫檔案路徑的組態檔,建立專案的預設檔案路徑為 flutter_package: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/
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_test:file:///D:/flutter_windows_2.8.1-stable/flutter/packages/flutter_test/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_package:lib/

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

  建立新的應用程式專案用來載入並使用自訂包(Package)的定義類別。

  3-1.  新增自訂包(Package)路徑  

   在pubspec.yaml檔案中新增載入自訂包的路徑後執行“flutter pub get”命令進行更新.packages檔案。
name: flutter_application
description: A new Flutter project.
publish_to: 'none' 
version: 1.0.0+1
environment:
  sdk: ">=2.15.1 <3.0.0"
dependencies:
  flutter:
    sdk: flutter
   
  flutter_package:
    path: C:/Users/yuanj/Desktop/flutter_package
  cupertino_icons: ^1.0.2
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^1.0.0
flutter:
  uses-material-design: true
    執行更新命令後則相關路徑會新增至 .packages檔案
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_package:file:///C:/Users/yuanj/Desktop/flutter_package/lib/
flutter_test:file:///D:/flutter_windows_2.8.1-stable/flutter/packages/flutter_test/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_application:lib/

  3-2.  載入自訂包(Package)

    在main.dart檔案中新增載入自訂包的路徑和執行自訂函式
import 'package:flutter/material.dart';
import 'package:flutter_package/flutter_package.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
   );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
  
  final  calculator = Calculator();
  final _counter2 =  calculator.addOne(_counter);
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[           
          const Text(
            'You have pushed the button this many times:', 
          ),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headline4,
          ),
          Text(
            "The addOne Value of Calculator Class : $_counter2",
          ),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    ), 
  );
}}

  3-3.  各平台中執行自訂包(Package)相關函式

    點選右下角No Devices項目後切換至要執行偵錯的平台並執行 Run -> Start Debugging (F5) 進行偵錯
  •   Windows Desktop
  •   Chrome Web
  •   Linux APP (Ubuntu)
  •   Android APP
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
說明Flutter 骨架(skeleton)專案範例的架構與在各平台執行的顯示畫面
說明Flutter 應用軟體(Application)專案範例的架構與在各平台執行的顯示畫面
說明如何在Windows系統中安裝 Flutter 與 Visual Studio Code 的開發環境
說明如何在Linux系統中安裝 Flutter 與 Visual Studio Code 開發環境
說明Flutter 骨架(skeleton)專案範例的架構與在各平台執行的顯示畫面
說明Flutter 應用軟體(Application)專案範例的架構與在各平台執行的顯示畫面
說明如何在Windows系統中安裝 Flutter 與 Visual Studio Code 的開發環境
說明如何在Linux系統中安裝 Flutter 與 Visual Studio Code 開發環境
你可能也想看
Google News 追蹤
Thumbnail
在 Dart 程式語言中,函式不僅可以接收參數,還能為這些參數設定預設值。這樣的設計使得函式的呼叫更加靈活,並且簡化了程式碼的撰寫。本文將深入探討如何定義具有預設參數值的函式,並透過實際範例來加深理解。
Thumbnail
本文介紹了 Dart 中具有參數的函式。具有參數的函式允許靈活地處理不同輸入,增強程式碼的模組化和可重用性。透過範例說明,讀者能夠理解如何定義和使用這些函式,並掌握進階概念以提升程式設計能力。
Thumbnail
本文介紹如何建立第一個 Flutter 應用程式。如何在 Visual Studio Code 中建立專案,包括專案類型選擇、存放位置設定等。還介紹了在 iOS、Android 模擬器、真實設備及建立 Web、桌面應用程式執行的方法
Thumbnail
本章節的目的是介紹Java中的套件使用,包括如何引用第三方套件和自定義模組,如何創建和使用自定義套件,以及介紹一些常見的Java標準庫套件。這些內容將幫助讀者更好地理解和使用Java的套件系統。
Thumbnail
本章節旨在教導讀者如何在 Kotlin 中引入套件。將會涵蓋如何引用第三方套件,如何引用自定義模組,以及如何創建和引用自定義套件。此外,還會列出一些常用的套件,以供讀者參考。
Thumbnail
此文件的目的是教授 Kotlin 程式語言的運算符,包括算數運算子、比較運算子、賦值運算子、位元運算子以及運算子的優先等級。這將有助於讀者更好地理解和撰寫 Kotlin 程式碼。
Thumbnail
本文總結和介紹了Kotlin的基本語法、註解和變數的使用,透過實例進行講解,以幫助讀者更好地理解和快速上手Kotlin語言。
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
Flutter is a powerful, open-source UI software development kit created by Google.
Thumbnail
我們將深入介紹如何使用 Kotlin 在 Android 平台上開發一個簡單的計算機應用程式。這個課程的目標是教授大家如何通過點擊計算機鍵盤,輸入算式,並得到計算結果。透過這套課程,你將能夠熟練掌握 Kotlin 語言在 Android 開發中的實際應用,並輕鬆打造出屬於自己的計算機應用程式。
Thumbnail
在 Dart 程式語言中,函式不僅可以接收參數,還能為這些參數設定預設值。這樣的設計使得函式的呼叫更加靈活,並且簡化了程式碼的撰寫。本文將深入探討如何定義具有預設參數值的函式,並透過實際範例來加深理解。
Thumbnail
本文介紹了 Dart 中具有參數的函式。具有參數的函式允許靈活地處理不同輸入,增強程式碼的模組化和可重用性。透過範例說明,讀者能夠理解如何定義和使用這些函式,並掌握進階概念以提升程式設計能力。
Thumbnail
本文介紹如何建立第一個 Flutter 應用程式。如何在 Visual Studio Code 中建立專案,包括專案類型選擇、存放位置設定等。還介紹了在 iOS、Android 模擬器、真實設備及建立 Web、桌面應用程式執行的方法
Thumbnail
本章節的目的是介紹Java中的套件使用,包括如何引用第三方套件和自定義模組,如何創建和使用自定義套件,以及介紹一些常見的Java標準庫套件。這些內容將幫助讀者更好地理解和使用Java的套件系統。
Thumbnail
本章節旨在教導讀者如何在 Kotlin 中引入套件。將會涵蓋如何引用第三方套件,如何引用自定義模組,以及如何創建和引用自定義套件。此外,還會列出一些常用的套件,以供讀者參考。
Thumbnail
此文件的目的是教授 Kotlin 程式語言的運算符,包括算數運算子、比較運算子、賦值運算子、位元運算子以及運算子的優先等級。這將有助於讀者更好地理解和撰寫 Kotlin 程式碼。
Thumbnail
本文總結和介紹了Kotlin的基本語法、註解和變數的使用,透過實例進行講解,以幫助讀者更好地理解和快速上手Kotlin語言。
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
Flutter is a powerful, open-source UI software development kit created by Google.
Thumbnail
我們將深入介紹如何使用 Kotlin 在 Android 平台上開發一個簡單的計算機應用程式。這個課程的目標是教授大家如何通過點擊計算機鍵盤,輸入算式,並得到計算結果。透過這套課程,你將能夠熟練掌握 Kotlin 語言在 Android 開發中的實際應用,並輕鬆打造出屬於自己的計算機應用程式。