SlideShare a Scribd company logo
Flutter
實作概述
阿達
GDG x GDSC
@陽明交通大學
阿達/Ahdaa
NPC
GDG Taipei
GDG Taichung
莫希爾手札 主筆
水映工作坊 打雜工
about.me/ahdaa
Join at
slidocom
#4024480
flutter.dev
C:srcflutter ~/development
Windows MacOS
將
{your_path}/flutter/bin
加入環境變數
可以開發 Flutter 的工具
Android Studio Visual Studio
Code
IntelliJ
再安裝
Flutter Plugin
安裝
Android Studio
安裝 Flutter 時,它同時
會問是否安裝 Dart
什麼是
Flutter
Flutter is an
open source framework by Google for building
beautiful,
natively compiled,
multi-platform applications
from a single codebase.
來源:docs.flutter.dev
什麼是
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
生態系 ● Plugin
https://github.com/flutter/
plugins
● Firebase
https://github.com/Firebas
eExtended/flutterfire
● 社群
https://github.com/flutterc
ommunity/community
來源:docs.flutter.dev
Flutter 架構
Dart
程式碼
繪圖
事件
硬體
(相機、感測器等)
你的應用程式 系統平台
橋接
程式碼
原生
程式碼
Flutter
元件渲染
新專案
來開個專案吧~~
專案的
目錄結構
你需要認識
的東西
● BuildContext
● Widget
● State
● Key
萬物皆
Widget
Scaffold()
萬物皆
Widget
Scaffold()
Center()
AppBar()
FloatingActionButton
萬物皆
Widget
Column()
Text()
萬物皆
Widget
Text()
Text()
Widget
&
State
● StatelessWidget
● StatefulWidget
● InheritedWidget
● Flutter Widgets 101 Video
Flutter Widgets 101
setState()
onPressed: (){
setState((){
counter++;
});
}
Flutter實作概述 | GDSC NYCU
Flutter實作概述 | GDSC NYCU
Flutter實作概述 | GDSC NYCU
Flutter實作概述 | GDSC NYCU
Flutter實作概述 | GDSC NYCU
學習資源
&
工具
● Flutter 官網
○ Cookbook
○ Codelabs & workshops
● Codelabs - Flutter
Google Codelabs
● Youtube - Flutter
Flutter YouTube channel
● 線上編輯器
https://dartpad.dartlang.org
Demo Code
https://drive.google.com/file/d/1mUVw2UzhDuCivdB2OIakBMB3RfdHqYMK/vi
ew?usp=sharing

More Related Content

PDF
Flutter實作概述 | GDSC NYCU
PDF
導入 Flutter 前你應該知道的事
PDF
Flutter 踩雷心得
PDF
GDG Taichung - Flutter and Firebase.pdf
PDF
初窺 Flutter 開發.pdf
PDF
給 iOS 工程師的 Flutter 開發
PPTX
Flutter Forward Extended in Google Developer Taipei
PPTX
硫酸鎂(MgSO₄) 在氣喘治療的作用機轉 ( The Mechanism of Action of Magnesium Sulfate (MgSO₄) ...
Flutter實作概述 | GDSC NYCU
導入 Flutter 前你應該知道的事
Flutter 踩雷心得
GDG Taichung - Flutter and Firebase.pdf
初窺 Flutter 開發.pdf
給 iOS 工程師的 Flutter 開發
Flutter Forward Extended in Google Developer Taipei
硫酸鎂(MgSO₄) 在氣喘治療的作用機轉 ( The Mechanism of Action of Magnesium Sulfate (MgSO₄) ...

More from 秀吉(Hsiu-Chi) 蔡(Tsai) (20)

PPTX
GDSC CTU First Meeting Party
PPTX
The Cloud-Native Solution of Integrate Satellite Ground Station System and Te...
PDF
AI/ML O-RAN Cloud-Native Automation
PDF
從 Taker 成為 Giver!偏鄉學生也能成為開源貢獻者!
PDF
什麼是Nephio?
PPTX
Google IO Extended 2023 Hsinchu開場
PPTX
Case Studied on Federated learning Deployment in O-RAN
PDF
跟著 AI 學 Angular:活用 AI 讓你輕鬆快速掌握任何知識
PDF
陽明交大 百川學程 服務學習二 專業服務企畫案-期末論壇 簡報
PDF
找到你的為什麼,革自己的命 | 偏鄉教育 | 蔡秀吉
PDF
Firebase 基礎上手 |2小時由入門到精通 | GDSC NYCU
PDF
GDSC NYCU下學期社員大會
PDF
The Development and Prospect of Deploying Cloud-Native O-RAN.pdf
PDF
部屬雲原生O-RAN架構的發展與展望
PPTX
Young飛全球行動計畫 ppt 年度成果簡報
PPTX
World Engineering Day Hackathon 2023
PDF
陽明學生會 陽明校區無線通訊品質問題-初步進度報告書
PDF
博雅書苑 社教中心 Active Learning 自主學習計畫說明會 -蔡秀吉經驗分享簡報
PPTX
從零開始學 Android
PPTX
關於普拿疼,多的是你不知道的事
GDSC CTU First Meeting Party
The Cloud-Native Solution of Integrate Satellite Ground Station System and Te...
AI/ML O-RAN Cloud-Native Automation
從 Taker 成為 Giver!偏鄉學生也能成為開源貢獻者!
什麼是Nephio?
Google IO Extended 2023 Hsinchu開場
Case Studied on Federated learning Deployment in O-RAN
跟著 AI 學 Angular:活用 AI 讓你輕鬆快速掌握任何知識
陽明交大 百川學程 服務學習二 專業服務企畫案-期末論壇 簡報
找到你的為什麼,革自己的命 | 偏鄉教育 | 蔡秀吉
Firebase 基礎上手 |2小時由入門到精通 | GDSC NYCU
GDSC NYCU下學期社員大會
The Development and Prospect of Deploying Cloud-Native O-RAN.pdf
部屬雲原生O-RAN架構的發展與展望
Young飛全球行動計畫 ppt 年度成果簡報
World Engineering Day Hackathon 2023
陽明學生會 陽明校區無線通訊品質問題-初步進度報告書
博雅書苑 社教中心 Active Learning 自主學習計畫說明會 -蔡秀吉經驗分享簡報
從零開始學 Android
關於普拿疼,多的是你不知道的事
Ad

Flutter實作概述 | GDSC NYCU