跨碼軟體有限公司的沙龍

Flutter 插件 (Plugins) 專案範例

跨碼軟體有限公司-avatar-img
跨碼軟體有限公司
更新於 發佈於 閱讀時間約 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




avatar-img
跨碼軟體有限公司的沙龍
3會員
9內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者！
跨碼軟體有限公司的沙龍 的其他內容
 Flutter 包 (Package) 專案範例
說明Flutter 包(Package)專案範例的架構與實際載入並執行在各平台的顯示畫面
#flutter#packageproject#windows
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 包 (Package) 專案範例
說明Flutter 包(Package)專案範例的架構與實際載入並執行在各平台的顯示畫面
#flutter#packageproject#windows
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-avatar
理財人妻Vivi
2024/12/25
Thumbnail
為什麼選擇美股？從入門策略到如何突破理財門檻 with 國泰世華CUBE App


隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。



然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
#美股小白#國泰世華銀行#國泰世華
avatar-avatar
筱涵｜Hannah的沙龍
2025/01/02
Thumbnail
【生活記事】AI人工智慧解籤｜慈母籤｜線上求籤｜科技與玄學
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
#互動設計#文化體驗#慈母籤
avatar-avatar
HKT實驗室
2024/11/28
Thumbnail
【Flutter 學習筆記】TextField 文字輸入框元件
在本文中，我們將介紹 TextField 文字輸入框元件及其基本用法。TextField 是一個關鍵的元件，使用者可以輕鬆地輸入文字，廣泛應用於各類應用程式中，如表單、搜尋框和聊天介面等。
#flutter#Flutter#Dart
avatar-avatar
HKT實驗室
2024/11/28
Thumbnail
【Flutter 學習筆記】Image 圖片元件
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片，以及如何載入網路圖片的完整過程。透過這篇文章，您將學會如何有效地管理圖片資源，並在應用程式中正確顯示圖片，提升您的 Flutter 開發技能。
#flutter#Flutter#Dart
avatar-avatar
HKT實驗室
2024/11/26
Thumbnail
【Flutter 學習筆記】ElevatedButton 按鈕元件
這篇文章深入探討了 Flutter 框架中的 ElevatedButton（漂浮按鈕）元件。文章介紹了其基本用法，包括必填參數 onPressed 和 child 的解析，並示範了如何使用匿名函數來處理按鈕點擊事件。此外，還說明了如何設定按鈕的顏色和形狀，並提供了完整的範例程式碼。
#flutter#Flutter#Dart
avatar-avatar
HKT實驗室
2024/11/25
Thumbnail
【Flutter 學習筆記】Row、Column 佈局容器
在本篇教學中，我們介紹了 Flutter 中的 Row 和 Column 佈局容器，並探討了它們的基本用法及進階技巧。此外，我們還提到如何使用快捷鍵來格式化程式碼，以提升可讀性。
#flutter#Flutter#Dart
avatar-avatar
HKT實驗室
2024/11/24
Thumbnail
【Flutter 學習筆記】 Container  容器元件
本文深入探討 Flutter 中的 Container 元件，這是一個多功能的包裝 Widget，能夠有效管理和裝飾其他 Widget。文章將詳細說明如何調整 Container 的大小、設置外部間距（margin）以及使用 BoxDecoration 來自訂樣式。
#flutter#FlutterContainer元件#Flutter
avatar-avatar
HKT實驗室
2024/11/20
Thumbnail
【Flutter 學習筆記】Text 元件：顯示文字的技巧與屬性設定
在這篇文章中，我們深入探討 Flutter 中的 Text 元件，這是一個用於顯示文字的基本組件。無論是純文字顯示、字體樣式的設定，還是多行顯示，Text 元件都能輕鬆應對。
#flutter#程式#Flutter
avatar-avatar
HKT實驗室
2024/11/13
Thumbnail
【Flame 學習筆記】GameWidget 元件介紹
本篇文章介紹 GameWidget 是 Flutter 中用於嵌入遊戲實例的 widget，能作為應用程式的根部件或嵌入其他 widget 中。它自動擴展以填滿可用空間，並提供多種結構支援功能，如加載、錯誤處理和背景裝飾。
#flame
avatar-avatar
HKT實驗室
2024/10/17
Thumbnail
【Flutter 學習筆記】如何建立第一個 Dart 應用程式
本文介紹建立第一個 Flutter 應用程式的方法。包括打開 Visual Studio Code 建立專案，在 iOS、Android 模擬器及真實設備、Web 和桌面環境運行的步驟。成功建立是重要里程碑，可探索更多功能，持續練習提升技能。

#Flutter
avatar-avatar
HKT實驗室
2024/10/15
Thumbnail
【Flutter 學習筆記】如何建立第一個 Flutter 應用程式
本文介紹如何建立第一個 Flutter 應用程式。如何在 Visual Studio Code 中建立專案，包括專案類型選擇、存放位置設定等。還介紹了在 iOS、Android 模擬器、真實設備及建立 Web、桌面應用程式執行的方法
#Flutter
avatar-avatar
HKT實驗室
2024/09/20
Thumbnail
2024 最新 Flutter 教學【Flutter 學習筆記】系列文章目錄
本文專為 Flutter 開發者設計的實用指南，內容涵蓋了 Flutter SDK 的安裝、開發環境的設置、Dart 語言的核心概念、常用 UI 元件的應用及其實作等重要主題。透過豐富的實際範例和詳細的說明，讀者將能夠輕鬆掌握 Flutter 的基本概念，快速上手開發高效能的應用程式。
#Flutter#Flutter教學#Flutter範例
avatar-avatar
理財人妻Vivi
2024/12/25
Thumbnail
為什麼選擇美股？從入門策略到如何突破理財門檻 with 國泰世華CUBE App


隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。



然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
#美股小白#國泰世華銀行#國泰世華
avatar-avatar
筱涵｜Hannah的沙龍
2025/01/02
Thumbnail
【生活記事】AI人工智慧解籤｜慈母籤｜線上求籤｜科技與玄學
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
#互動設計#文化體驗#慈母籤
avatar-avatar
HKT實驗室
2024/11/28
Thumbnail
【Flutter 學習筆記】TextField 文字輸入框元件
在本文中，我們將介紹 TextField 文字輸入框元件及其基本用法。TextField 是一個關鍵的元件，使用者可以輕鬆地輸入文字，廣泛應用於各類應用程式中，如表單、搜尋框和聊天介面等。
#flutter#Flutter#Dart
avatar-avatar
HKT實驗室
2024/11/28
Thumbnail
【Flutter 學習筆記】Image 圖片元件
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片，以及如何載入網路圖片的完整過程。透過這篇文章，您將學會如何有效地管理圖片資源，並在應用程式中正確顯示圖片，提升您的 Flutter 開發技能。
#flutter#Flutter#Dart
avatar-avatar
HKT實驗室
2024/11/26
Thumbnail
【Flutter 學習筆記】ElevatedButton 按鈕元件
這篇文章深入探討了 Flutter 框架中的 ElevatedButton（漂浮按鈕）元件。文章介紹了其基本用法，包括必填參數 onPressed 和 child 的解析，並示範了如何使用匿名函數來處理按鈕點擊事件。此外，還說明了如何設定按鈕的顏色和形狀，並提供了完整的範例程式碼。
#flutter#Flutter#Dart
avatar-avatar
HKT實驗室
2024/11/25
Thumbnail
【Flutter 學習筆記】Row、Column 佈局容器
在本篇教學中，我們介紹了 Flutter 中的 Row 和 Column 佈局容器，並探討了它們的基本用法及進階技巧。此外，我們還提到如何使用快捷鍵來格式化程式碼，以提升可讀性。
#flutter#Flutter#Dart
avatar-avatar
HKT實驗室
2024/11/24
Thumbnail
【Flutter 學習筆記】 Container  容器元件
本文深入探討 Flutter 中的 Container 元件，這是一個多功能的包裝 Widget，能夠有效管理和裝飾其他 Widget。文章將詳細說明如何調整 Container 的大小、設置外部間距（margin）以及使用 BoxDecoration 來自訂樣式。
#flutter#FlutterContainer元件#Flutter
avatar-avatar
HKT實驗室
2024/11/20
Thumbnail
【Flutter 學習筆記】Text 元件：顯示文字的技巧與屬性設定
在這篇文章中，我們深入探討 Flutter 中的 Text 元件，這是一個用於顯示文字的基本組件。無論是純文字顯示、字體樣式的設定，還是多行顯示，Text 元件都能輕鬆應對。
#flutter#程式#Flutter
avatar-avatar
HKT實驗室
2024/11/13
Thumbnail
【Flame 學習筆記】GameWidget 元件介紹
本篇文章介紹 GameWidget 是 Flutter 中用於嵌入遊戲實例的 widget，能作為應用程式的根部件或嵌入其他 widget 中。它自動擴展以填滿可用空間，並提供多種結構支援功能，如加載、錯誤處理和背景裝飾。
#flame
avatar-avatar
HKT實驗室
2024/10/17
Thumbnail
【Flutter 學習筆記】如何建立第一個 Dart 應用程式
本文介紹建立第一個 Flutter 應用程式的方法。包括打開 Visual Studio Code 建立專案，在 iOS、Android 模擬器及真實設備、Web 和桌面環境運行的步驟。成功建立是重要里程碑，可探索更多功能，持續練習提升技能。

#Flutter
avatar-avatar
HKT實驗室
2024/10/15
Thumbnail
【Flutter 學習筆記】如何建立第一個 Flutter 應用程式
本文介紹如何建立第一個 Flutter 應用程式。如何在 Visual Studio Code 中建立專案，包括專案類型選擇、存放位置設定等。還介紹了在 iOS、Android 模擬器、真實設備及建立 Web、桌面應用程式執行的方法
#Flutter
avatar-avatar
HKT實驗室
2024/09/20
Thumbnail
2024 最新 Flutter 教學【Flutter 學習筆記】系列文章目錄
本文專為 Flutter 開發者設計的實用指南，內容涵蓋了 Flutter SDK 的安裝、開發環境的設置、Dart 語言的核心概念、常用 UI 元件的應用及其實作等重要主題。透過豐富的實際範例和詳細的說明，讀者將能夠輕鬆掌握 Flutter 的基本概念，快速上手開發高效能的應用程式。
#Flutter#Flutter教學#Flutter範例