2024 最新 Flutter 教學 － Flutter 終極指南： 連結
從零開始學 Dart 程式設計： 連結
Flutter 程式設計入門實戰 30 天： 連結
哈囉～大家好，我是 KT ，因緣際會 KT 報名參加第11屆【iT邦幫忙鐵人賽】Mobile Development 行動開發組，挑戰連續３０天發表技術文章不中斷，從 2019/9/16 到 2019/10/16。KT 的題目是 「Flutter 程式設計入門實戰 30 天」，每天將介紹如何使用基本 Flutter 元件來開發 Android 和 iOS 雙平台的 APP 行動應用程式。
Day 1：為什麼要用 Flutter ?
Day 2：安裝 Flutter 開發環境
Day 3：建立第一個 Flutter 應用程式專案
Day 4：第一支 Flutter 應用程式，Hello World
Day 5：起手式程式碼
Day 6：Container 大大容器
Day 7：水平 Row 和垂直 Column 容器
Day 8：Center 置中容器
Day 9：Text 文字標籤元件
Day 10：Button 按鈕元件
Day 11：Image 圖片元件
Day 12：TextField 文字輸入框元件
Day 13：簡單跳頁
Day 14：從Ａ頁跳到Ｂ頁，並傳遞資料
Day 15：從Ｂ頁返回Ａ頁，並傳回資料
Day 16：傳遞整包資料
Day 17：FloatingActionButton 漂浮按鈕
Day 18：SnackBar 提示元件
Day 19：對話框視窗
Day 20：BottomNavigationBar 底部頁面導航元件
Day 21：TabBar 選項卡頁面導航元件
Day 22：Drawer 抽屜頁面導航元件
Day 23：Stack 堆疊元件
Day 24：ListView 列表元件
Day 25：GridView 網格元件
Day 26：Table 表格元件
Day 27：SharedPreferences 資料存取
Day 28：Sqflite 資料庫存取
Day 29：Provider 狀態管理
Day 30：最後一天
今天【iT邦幫忙鐵人賽】挑戰第一天，KT 將為大家來介紹，為什麼要用 Flutter ?
Flutter 是由 Google 主導的 Dart 程式語言研發出來的開源跨平台軟體框架 (Framework)，亦即是說可以寫一套程式碼在多個作業平台上運行。其實單一套程式可以同時運行在目前最火紅的雙行動平台 Android 和 iOS 上，KT 認為就是一件很值得投資學習的程式語言。
不僅如此 Flutter 有相當高的效率 120FPS 的渲染性能，豐富的UI元件，媲美 Native 原生效能體驗。如果想更詳細了解 Flutter 為什麼性能優勝於其他跨平台程式語言如：Reactive、PhoneGap 可以參考篇文章： 「What’s Revolutionary about Flutter」，這邊 KT 快速簡單扼要的說明 Flutter 革命性的變化，就是將 Widget 拉到 SDK 這一層，透過 Dart 虛擬機器，不用還要透過中間層 Bridge 轉換才能繪製出，如：按鈕、文字框…等畫面，大幅提升運行效能。
原生語言運行效能最好，但每個平台皆需各維護一套程式語言。不能說寫好一套程式，每個平台同時共用，需要各平台各造同樣的輪子。 Flutter 就是要解決這個痛處並改善 PhoneGap 和 Reactive 運行效能的問題。
圖中 Bridge 指的是 Reactive SDK，因為要透過 Bridge 來跟平台溝通導致整體運行效能上較差。
Flutter 革命性的變化，就是將 Widget 拉到 SDK 這一層，透過 Dart 虛擬機器，不用還要透過 Bridge 轉換才能繪製出，按鈕、文字框...等畫面，大幅提升運行效能。
如果覺得上面幾張圖的介紹與描述，還不夠力道說明 Flutter 性能，心裏覺得還是不踏實，想知道 Reactive 和 Flutter 實際在 iPhone 和 Android 手機上運行比較，可以參考阿里巴巴旗下的閒魚交易平台所寫的這篇文章：「流言終結者 - Flutter 和 RN 誰才是更好的跨端開發方案？」
珍藏撇步，不私藏，分享一下 KT 怎麼學習 Flutter ， KT 滿常在這幾個地方晃，來學習如何開發 Flutter 應用程式。
Flutter 官網文件說明書 (英文)
https://flutter.dev/docs
Flutter 官網文件說明書 (簡體中文)
https://flutter.cn/docs
Twitter (搜尋 flutterdev 的 tag 標籤)
https://twitter.com/search?q=flutterdev
Medium (搜尋 flutter)
https://medium.com/search?q=flutter
掘金 (搜尋 flutter 的 tag 標籤)
https://juejin.im/tag/Flutter
Flutter Awesome
https://flutterawesome.com/
Flutter Taiwan 臉書粉絲團
https://www.facebook.com/groups/flutter.tw/
Flutter 主要是使用 Dart 程式語言編寫出來的框架，KT 怕有些同學與小夥伴們想使用 Flutter 來開發手機 APP 應用程式，卻因為不認識 Dart 程式語言，而卡關望之卻步，KT 這邊貼心的附上，在部落格發表的「Dart 程式語言入門」講義，想進一步了解，可以參考以下相關資料：
| No. | 課程名稱 | 講義 |
|---|---|---|
| 1 | 安裝 Dart 開發環境 | 連結 |
| 2 | 建立第一個 Dart 專案 | 連結 |
| No. | 課程名稱 | 講義 |
|---|---|---|
| 1 | 單行、多行註解程式 | 連結 |
| 2 | 變數與常數 | 連結 |
| 3 | 數字與邏輯資料型態 | 連結 |
| 4 | 字串資料型態 | 連結 |
| 5 | 運算符號 | 連結 |
| No. | 課程名稱 | 講義 |
|---|---|---|
| 1 | List 集合資料型態 | 連結 |
| 2 | Map 集合資料型態 | 連結 |
| No. | 課程名稱 | 講義 |
|---|---|---|
| 1 | if 條件控制 | 連結 |
| 2 | switch 條件控制 | 連結 |
| No. | 課程名稱 | 講義 |
|---|---|---|
| 1 | for 循環控制 | 連結 |
| 2 | while 循環控制 | 連結 |
| 3 | 跳轉語句： break、continue、return | 連結 |
| No. | 課程名稱 | 講義 |
|---|---|---|
| 1 | 方法 | 連結 |
| No. | 課程名稱 | 講義 |
|---|---|---|
| 1 | 類別 | 連結 |
| 2 | 繼承 | 連結 |
| 3 | 抽象 | 連結 |
| 4 | 介面 | 連結 |
| 5 | 套件 | 連結 |
「Flutter 程式設計入門實戰 30 天」中提供所有的圖文與程式碼，以下簡稱「本資料」。「本資料」，允許使用者重製、散布、傳輸以及修改著作，但不得為商業目的之使用。使用時必須註明出處。「本資料」由 HKT (侯光燦) 編輯著作。
「本資料」，其中所引用之各商標及產品名稱分屬其合法公司所有，「本資料」，部分採用開放源始碼、圖文與影音等多媒體，引用自於網路，皆屬於其原作者之所有，「本資料」引用純屬介紹之用，並無任何侵權之意，特此聲明，其中內容若有不妥，或是侵犯了您的合法權益，請麻煩通知我們，我們將會迅速協助將侵權的部分移除，謝謝!
*若有任何問題，麻煩來信「thishkt@gmail.com」聯繫，謝謝。
那今天【iT邦幫忙鐵人賽】就介紹到這邊囉～
順帶一提，KT 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，加追蹤喔！也歡迎大家將這篇文章分享給更多人喔。
我們明天見囉！！！掰掰～
HKT 線上教室
http://tw-hkt.blogspot.com/
從零開始學 Dart 程式設計
https://tw-hkt.blogspot.com/2019/08/2019-dart-83.html
Background vector created by freepik
https://www.freepik.com
Flutter 官網
https://flutter.dev/docs
What’s Revolutionary about Flutter
https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
流言終結者 - Flutter 和 RN 誰才是更好的跨端開發方案？
https://www.yuque.com/xytech/flutter/gs3pnk
iThome鐵人賽
看影片追技術