Flutter  的包(Package)專案範例,提供建立以純Dart語言包(Package)的專案架構。

1. 建立新的Flutter專案

1-1. 開啟命令介面

1_Android_CmdPalet.png

2_Android_NewProject

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

flutter_create_package

1-3. 輸入專案名稱

flutter_set_package

 

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

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

2-1. lib 目錄

    主要存放開發程式碼的目錄,而此範例中只提供一個簡單的範例程式檔案 ,flutter_package.dart 中定義 Caculator 類別提供給外部引用程式使用;而檔案中使用library關鍵字(Keywords)用來宣告此檔案為類別庫(library)的主檔案且此宣告必須在程式開頭。

1
2
3
4
5
6
7
 
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 類別是否執行正確性 ,藉由輸入不同的值並設定預期回傳的值來判斷是否回傳正確,若不是則會在執行時產生例外。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 
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);
 });
}

 

flutter_run_test_package

 

2-3. pubspec.yaml檔案

flutter 專案中的檔案配置檔,除了設定基本專案資訊並可設定專案中使用到的相依類別庫或外部資源。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
 
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/ 而此檔案是根據pubspec.yaml中的內容產生來的,設定引用類別庫格式為【路徑別名:實際路徑】。

flutter_use_package

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
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檔案。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
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檔案

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
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 檔案中新增載入自訂包的路徑和執行自訂函式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
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)相關函式

Windows Desktop

5_Windows_App

flutter_run_windows

Chrome Web

7_Chrome_App

flutter_run_web

Linux APP (Ubuntu)

17_Linux_App

flutter_run_linux

Android APP

5_Android_SelectDevice

flutter_run_android