跨碼軟體有限公司的沙龍

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
    • 





跨碼軟體有限公司的沙龍
3會員
9內容數
留言0
查看全部
發表第一個留言支持創作者！
跨碼軟體有限公司的沙龍 的其他內容
Flutter 骨架 (Skeleton) 專案範例
說明Flutter 骨架(skeleton)專案範例的架構與在各平台執行的顯示畫面

#flutter#skeletonproject#windows
Flutter 應用程式 (Application) 專案範例
說明Flutter 應用軟體(Application)專案範例的架構與在各平台執行的顯示畫面

#flutter#windows#linux
設定 Flutter 開發環境 (Windows)
說明如何在Windows系統中安裝 Flutter 與 Visual Studio Code 的開發環境

#Flutter#Windows#visualstudiocode
設定 Flutter 開發環境 (Linux)
說明如何在Linux系統中安裝 Flutter 與 Visual Studio Code 開發環境

#linux#flutter#visualstudiocode
Flutter 骨架 (Skeleton) 專案範例
說明Flutter 骨架(skeleton)專案範例的架構與在各平台執行的顯示畫面

#flutter#skeletonproject#windows
Flutter 應用程式 (Application) 專案範例
說明Flutter 應用軟體(Application)專案範例的架構與在各平台執行的顯示畫面

#flutter#windows#linux
設定 Flutter 開發環境 (Windows)
說明如何在Windows系統中安裝 Flutter 與 Visual Studio Code 的開發環境

#Flutter#Windows#visualstudiocode
設定 Flutter 開發環境 (Linux)
說明如何在Linux系統中安裝 Flutter 與 Visual Studio Code 開發環境

#linux#flutter#visualstudiocode
你可能也想看
Google News 追蹤
avatar
摩股史塔克の雙週報
2024/09/25
Thumbnail
【9月下雙週報】 過往降息循環輪廓觀察：近期是否將出現修正？哪些板塊受惠降息最顯著？
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹，以上內容並非個股分析，還請各位依據自身狀況作出交易決策。歡迎訂閱支持我，獲得相關內容，也祝您的投資之路順遂！
每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ
每月 $99 訂閱方案👉https://re
avatar
Digiworld的沙龍
2024/04/29
Thumbnail
Flutter for Beginners
Flutter is a powerful, open-source UI software development kit created by Google.
#flutter
avatar
小黑與程式的邂逅
2023/12/28
Thumbnail
[Flutter]JSON解析
解析成List

List items=json.decode(jsonStr);
print(items[0]["your_key"]);



解析成Map

Map<String, dynamic> user = json.decode(json);
print('${user['your_k
#flutter#json#decode
avatar
小黑與程式的邂逅
2023/12/26
Thumbnail
[Flutter]WebSockets
這邊會使用WebSocketChannel去與http://www.websocket.org做連線。



連線

final channel = IOWebSocketChannel.connect('wss://echo.websocket.events');



接收

StreamBui
#flutter#WebSocketChannel#StreamBuilder
avatar
小黑與程式的邂逅
2023/12/26
Thumbnail
[Flutter]Dio
Dio是一個Dart Http請求庫，支援Restful API、FormData、攔截器、請求取消、Cookie管理、檔案上傳/下載、逾時等。

加入

dependencies:
  dio: ^x.x.x #请使用pub上的最新版本



使用

GET

Response response;
#flutter#Dio#FormData
avatar
小黑與程式的邂逅
2023/12/25
Thumbnail
[Flutter]HttpClient
配置

idleTimeout：在httpClient請求結束後，會繼續保持連線，直到超過idleTimeout值才會關閉連接。

connectionTimeout：和伺服器建立連線逾時，如果超過connectionTimeout值則會拋出SocketException異常。

maxConnec
#flutter#Http#userAgent
avatar
楚天闊/影音亞空間的沙龍
2021/12/29
Thumbnail
【包寶寶Bao】2018
皮克斯動畫在正片前，通常會有一部短片，讓皮克斯旗下的動畫師們練功夫。這篇要說的是再【超人特攻隊2】正片前上映的短片【包寶寶Bao】。故事的設定很獵奇，可是卻對華人教育子女的心態描繪的很深刻感人。
#電視影集#包寶寶#皮克斯
avatar
單肩斜背包的沙龍
2021/08/19
“包”治百病，十款時髦炸裂的單肩包送給你
女生嘛，都是無包不歡的選手，衣服可以穿一身基本款，但包包就像整身look的點睛之筆，不夠吸睛可不行。這次小禮菌推薦的貌美單肩包都是這一季最IN的包款，每一個都有亮點，一起來挑選心儀美包吧~
1.撞色鉚釘鏈條包
凹造型必備鉚釘包·簡約的鉚釘裝飾搭配黑紅的經典撞色，叛逆而又時髦到炸裂，姑娘們無法對它Sa
avatar
bocot5630的沙龍
2021/07/24
包你發全年無休不間斷
近期許多地方受到洪水以及颱風的侵襲
但包你發的線路及網路穩定度完全不受到影響
大家可以放心，我們是24小時全年無休不間斷
就算你半夜三點要玩包你發也完全OK
不會像有些系統只在白天開放
而同樣的穩定度也是一大考驗
在這種供電不穩定的情況
也有可能導致其他遊戲斷線
但包你發機房穩定、有備用電源
完全不
avatar
rojewiy19的沙龍
2021/07/22
包你發與現行博奕遊戲的關係之探討
近期網路上針對包你發與其他博奕遊戲進行激烈的爭鬥
而我們也想要發表一下自己對於兩者的意見
今天就來分析一下兩者個別的優缺點
首先先來講包你發
包你發最大的優點就是合法、隨時可玩、可以買到很多遊戲虛寶
而最大的缺點則是不出金只出遊戲幣
其他博奕遊戲最大的優點就是自由，不受限制
而最大的缺點則是不合法，
avatar
摩股史塔克の雙週報
2024/09/25
Thumbnail
【9月下雙週報】 過往降息循環輪廓觀察：近期是否將出現修正？哪些板塊受惠降息最顯著？
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹，以上內容並非個股分析，還請各位依據自身狀況作出交易決策。歡迎訂閱支持我，獲得相關內容，也祝您的投資之路順遂！
每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ
每月 $99 訂閱方案👉https://re
avatar
Digiworld的沙龍
2024/04/29
Thumbnail
Flutter for Beginners
Flutter is a powerful, open-source UI software development kit created by Google.
#flutter
avatar
小黑與程式的邂逅
2023/12/28
Thumbnail
[Flutter]JSON解析
解析成List

List items=json.decode(jsonStr);
print(items[0]["your_key"]);



解析成Map

Map<String, dynamic> user = json.decode(json);
print('${user['your_k
#flutter#json#decode
avatar
小黑與程式的邂逅
2023/12/26
Thumbnail
[Flutter]WebSockets
這邊會使用WebSocketChannel去與http://www.websocket.org做連線。



連線

final channel = IOWebSocketChannel.connect('wss://echo.websocket.events');



接收

StreamBui
#flutter#WebSocketChannel#StreamBuilder
avatar
小黑與程式的邂逅
2023/12/26
Thumbnail
[Flutter]Dio
Dio是一個Dart Http請求庫，支援Restful API、FormData、攔截器、請求取消、Cookie管理、檔案上傳/下載、逾時等。

加入

dependencies:
  dio: ^x.x.x #请使用pub上的最新版本



使用

GET

Response response;
#flutter#Dio#FormData
avatar
小黑與程式的邂逅
2023/12/25
Thumbnail
[Flutter]HttpClient
配置

idleTimeout：在httpClient請求結束後，會繼續保持連線，直到超過idleTimeout值才會關閉連接。

connectionTimeout：和伺服器建立連線逾時，如果超過connectionTimeout值則會拋出SocketException異常。

maxConnec
#flutter#Http#userAgent
avatar
楚天闊/影音亞空間的沙龍
2021/12/29
Thumbnail
【包寶寶Bao】2018
皮克斯動畫在正片前，通常會有一部短片，讓皮克斯旗下的動畫師們練功夫。這篇要說的是再【超人特攻隊2】正片前上映的短片【包寶寶Bao】。故事的設定很獵奇，可是卻對華人教育子女的心態描繪的很深刻感人。
#電視影集#包寶寶#皮克斯
avatar
單肩斜背包的沙龍
2021/08/19
“包”治百病，十款時髦炸裂的單肩包送給你
女生嘛，都是無包不歡的選手，衣服可以穿一身基本款，但包包就像整身look的點睛之筆，不夠吸睛可不行。這次小禮菌推薦的貌美單肩包都是這一季最IN的包款，每一個都有亮點，一起來挑選心儀美包吧~
1.撞色鉚釘鏈條包
凹造型必備鉚釘包·簡約的鉚釘裝飾搭配黑紅的經典撞色，叛逆而又時髦到炸裂，姑娘們無法對它Sa
avatar
bocot5630的沙龍
2021/07/24
包你發全年無休不間斷
近期許多地方受到洪水以及颱風的侵襲
但包你發的線路及網路穩定度完全不受到影響
大家可以放心，我們是24小時全年無休不間斷
就算你半夜三點要玩包你發也完全OK
不會像有些系統只在白天開放
而同樣的穩定度也是一大考驗
在這種供電不穩定的情況
也有可能導致其他遊戲斷線
但包你發機房穩定、有備用電源
完全不
avatar
rojewiy19的沙龍
2021/07/22
包你發與現行博奕遊戲的關係之探討
近期網路上針對包你發與其他博奕遊戲進行激烈的爭鬥
而我們也想要發表一下自己對於兩者的意見
今天就來分析一下兩者個別的優缺點
首先先來講包你發
包你發最大的優點就是合法、隨時可玩、可以買到很多遊戲虛寶
而最大的缺點則是不出金只出遊戲幣
其他博奕遊戲最大的優點就是自由，不受限制
而最大的缺點則是不合法，