課程時間：2023/04/19 地點：陽明交大 科學三館 SC160 課程資源：https://reurl.cc/2WqZbE 講者：阿達(Ahdaa Yeh) 在這次大家敲碗已久的 Flutter 課程中，我們邀請到水映工作坊的負責人 Ahdaa，同時也是 GDG Taichung 的 organizer 來幫大家進行初階上手教學。

2. 本學期活動由數位行銷的領導品牌cacaFly聖洋科技獨家冠名贊助

3. Flutter
實作概述
阿達
GDG x GDSC
@陽明交通大學

4. 阿達/Ahdaa
NPC
GDG Taipei
GDG Taichung
莫希爾手札 主筆
水映工作坊 打雜工
about.me/ahdaa

5. Join at
slidocom
#4024480

6. flutter.dev

7. C:srcflutter ~/development
Windows MacOS
將
{your_path}/flutter/bin
加入環境變數

8. 可以開發 Flutter 的工具
Android Studio Visual Studio
Code
IntelliJ

9. 再安裝
Flutter Plugin
安裝
Android Studio
安裝 Flutter 時，它同時
會問是否安裝 Dart

10. 什麼是
Flutter
Flutter is an
open source framework by Google for building
beautiful,
natively compiled,
multi-platform applications
from a single codebase.
來源：docs.flutter.dev

11. 什麼是
Flutter
Flutter transforms the app development process.
Build, test, and deploy beautiful mobile, web,
desktop, and embedded apps from a single
codebase.
來源：docs.flutter.dev

12. 生態系 ● Plugin
https://github.com/flutter/
plugins
● Firebase
https://github.com/Firebas
eExtended/flutterfire
● 社群
https://github.com/flutterc
ommunity/community

13. 來源：docs.flutter.dev
Flutter 架構

14. Dart
程式碼
繪圖
事件
硬體
(相機、感測器等)
你的應用程式 系統平台
橋接
程式碼
原生
程式碼
Flutter
元件渲染

15. 新專案
來開個專案吧~~

16. 專案的
目錄結構

17. 你需要認識
的東西
● BuildContext
● Widget
● State
● Key

18. 萬物皆
Widget
Scaffold()

19. 萬物皆
Widget
Scaffold()
Center()
AppBar()
FloatingActionButton

20. 萬物皆
Widget
Column()
Text()

21. 萬物皆
Widget
Text()
Text()

22. Widget
&
State
● StatelessWidget
● StatefulWidget
● InheritedWidget
● Flutter Widgets 101 Video
Flutter Widgets 101

23. setState()
onPressed: (){
setState((){
counter++;
});
}

29. 學習資源
&
工具
● Flutter 官網
○ Cookbook
○ Codelabs & workshops
● Codelabs - Flutter
Google Codelabs
● Youtube - Flutter
Flutter YouTube channel
● 線上編輯器
https://dartpad.dartlang.org

30. Demo Code
https://drive.google.com/file/d/1mUVw2UzhDuCivdB2OIakBMB3RfdHqYMK/vi
ew?usp=sharing