有趣的Flutter 從0到1構建跨平台App

本書通過一個實際的FlutterApp，為大家介紹Flutter相關的知識。書中首先介紹了Flutter的環境配置、各種IDE的工具配置以及怎樣運行一個簡單的Flutter程式。然後介紹了Dart語言的一些基本概念。接著利用Flutter基本的容器元件、圖片元件以及佈局元件，教讀者創建一個簡單的待辦事項應用的原型介面，並介紹FlutterUI的佈局思路以及原理。介紹如何通過加複雜的元件的不同組合，讓待辦事項應用識別複雜的手勢以及在精妙的動畫和頁面之間完成路由跳轉。

第一部分　Flutter 的基礎知識
第1章 Flutter 概述　2
1．1　Flutter 的橫空出世　2
1．1．1　Flutter 的前身——Sky　2
1．1．2　Flutter 版本的歷史　2
1．2　Flutter 的技術亮點　4
1．2．1　跨平臺的精美設計　4
1．2．2　跨平臺的高生產力　6
1．2．3　跨平臺的高效表現　7
1．2．4　可擴展的開放平臺　7
1．3　小結　8
第2章 Dart 語言概述　9
2．1　基底資料型別　9
2．1．1　數字　9
2．1．2　字串　10
2．1．3　布林　10
2．1．4　列表　10
2．1．5　集合　11
2．1．6　映射　11
2．2　函數　12
2．2．1　聲明　12
2．2．2　參數　12
2．2．3　閉包　13
2．2．4　main 函數　14
2．2．5　匿名函數　14
2．3　流程控制　14
2．3．1　利用 if 來判斷　15
2．3．2　利用 for/while 來迴圈　15
2．3．3　利用 switch 來選擇　16
2．4　異常處理　16
2．4．1　拋出異常　16
2．4．2　捕獲異常　17
2．4．3　使用 finally 保證代碼一定被執行　17
2．5　類　18
2．5．1　類的成員變數　18
2．5．2　類的構造方法　19
2．5．3　使用 getter 和 setter　20
2．5．4　繼承　20
2．5．5　抽象機器制與抽象類別　21
2．5．6　隱式介面　21
2．5．7　繼承之外的另一種選擇：mixin　22
2．6　泛型　23
2．6．1　泛型與類型安全　23
2．6．2　在定義中使用泛型　24
2．6．3　在函數中使用泛型　24
2．6．4　限定泛型的類型　25
2．7　非同步　25
2．7．1　什麼是非同步　25
2．7．2　Future 對象與 async/await 關鍵字　25
2．7．3　使用 async for 處理 Stream 物件　26
2．8　引入外部代碼　27
2．8．1　利用 import 關鍵字引入其他框架中的代碼　27
2．8．2　利用 as 關鍵字防止外部框架衝突　27
2．9　小結　28
第3章　環境搭建　29
3．1　在 Windows 系統搭建環境　29
3．1．1　下載開發工具 Android Studio　29
3．1．2　搭建 Android 開發環境　31
3．1．3　安裝 Flutter SDK　34
3．2　在 Mac 系統搭建環境　35
3．2．1　下載開發工具 Android Studio　35
3．2．2　搭建 Android 開發環境　36
3．2．3　搭建 iOS 開發環境　37
3．2．4　安裝 Flutter SDK　39
3．3　小結　39
第4章　著手做第 一個 Flutter 程式　40
4．1　第 一個 Flutter 項目　40
4．2　Flutter 專案的檔結構　42
4．3　小結　43
第5章　調試工具　44
5．1　如何使用中斷點　44
5．1．1　普通中斷點與條件中斷點　44
5．1．2　step in 和 step over　46
5．2　HotReload 和 HotRestart　46
5．2．1　使用 HotReload 加快 UI 開發　47
5．2．2　理解 HotRestart　47
5．3　使用 Android Studio 中的 DevTools　47
5．3．1　使用 Flutter Inspector 查看 UI 結構　48
5．3．2　使用 Flutter Outline 查看代碼結構　50
5．4　小結　50
第6章　Widget 概述　51
6．1　Widget 的概述　51
6．1．1　文本展示：Text 組件　52
6．1．2　文本輸入：TextField 組件　57
6．1．3　圖片展示：Image 組件　58
6．1．4　處理點擊：Button 組件　60
6．2　利用 Widget 實現佈局　62
6．2．1　佈局容器：Container　62
6．2．2　彈性盒子佈局：Flex、Row、Column 和 Expanded　64
6．2．3　流式佈局：Wrap 和 Flow　72
6．2．4　層疊佈局：Stack 和 Position　76
6．3　滾動佈局　78
6．3．1　單列內容滾動：ListView　78
6．3．2　展示多列內容：GridView　83
6．4　Material 與 Cupertino　89
6．4．1　通用樣式 Widget 一覽　89
6．4．2　Material 的獨有樣式 Widget 一覽　91
6．4．3　Cupertino 的獨有樣式 Widget 一覽　93
6．5　小結　94

第二部分　動手做一個待辦事項應用
第7章　我們要做一個什麼樣的應用　96
7．1　頁面一覽　96
7．2　整體技術點一覽　100
第8章　第 一個頁面——“登錄”頁面　102
8．1　搭建 UI 框架　103
8．1．1　創建登錄分頁檔　103
8．1．2　搭建整體結構　104
8．1．3　佈局文字方塊組件　106
8．1．4　繼續完善細節　109
8．2　填充組件　113
8．2．1　填充圖片元件　113
8．2．2　填充郵箱和密碼輸入框　117
8．2．3　登錄按鈕與註冊提示按鈕　117
8．3　為頁面增加本地邏輯　123
8．3．1　處理鍵盤遮擋問題　123
8．3．2　處理焦點　131
8．3．3　為文本輸入框增加校驗邏輯　136
8．4　小結　138
第9章　跳轉到第二個頁面　139
9．1　簡單的頁面跳轉　139
9．1．1　Navigator 初探：簡單的路由跳轉　140
9．1．2　Navigator 再探：命名路由　143
9．1．3　Navigator 終探：路由傳參　144
9．2　為頁面跳轉添加自訂的過渡效果　146
9．2．1　實現漸變的頁面過渡　146
9．2．2　瞭解頁面過渡的原理　147
9．3　完善我們的“註冊”頁面　150
9．3．1　處理 “註冊”頁面中的使用者頭像　151
9．3．2　處理“登錄”頁面與“註冊”頁面之間的跳轉邏輯　155
9．4　小結　156
第10章 待辦事項應用的靈魂——“清單”頁面　157
10．1　構建帶有 BottomNavigationBar 的頁面　157
10．1．1　創建 BottomNavigationBar　158
10．1．2　使用 StatefulWidget 完成頁面轉換　163
10．1．3　用正確的方式構建 body　165
10．2　使用 ListView 構建頁面　169
10．2．1　準備數據　169
10．2．2　用 ListView 展示待辦事項　173
10．3　為 ListView 增加簡單的事件交互　178
10．3．1　為待辦事項添加事件回檔　178
10．3．2　添加事件回檔的具體邏輯　180
10．3．3　完善列表的排序功能　183
10．4　小結　186
第11章 添加、編輯、查看 TODO——待辦事項編輯頁　187
11．1　構建簡單的表單頁面　187
11．1．1　搭建頁面框架　187
11．1．2　封裝帶有標題的 LabelGroup 組件　189
11．1．3　構建待辦事項的標題和描述文字方塊　191
11．2　構建較為複雜的日期選擇器組件和時間選擇器　195
11．2．1　瞭解 DatePicker 和 TimePicker　196
11．2．2　封裝日期選擇器和時間選擇器　198
11．2．3　構建日期選擇器和時間選擇器　200
11．3　構建優先順序展示框　204
11．3．1　實現優先順序展示框　204
11．3．2　實現優先順序彈出功能表　206
11．4　完善表單細節內容　209
11．4．1　完善表單中的細節內容　209
11．4．2　將新創建的待辦事項添加到列表中　210
11．5　小結　213
第12章 讓我們的應用更加完美　214
12．1　瞭解 Flutter 中的動畫　214
12．1．1　Animation 類　214
12．1．2　AnimationController 類　216
12．1．3　CurvedAnimation 類　217
12．1．4　Tween 類　218
12．2　動手為我們的待辦事項應用增加動畫　219
12．2．1　為“登錄”頁面增加動畫　219
12．2．2　使用 AnimatedWidget 封裝動畫　221
12．2．3　為登錄 Logo 增加 Hero 動畫　224
12．2．4　為“清單”頁面增加動畫　231
12．3　利用 PlatformChannel 實現定位功能　234
12．3．1　瞭解 PlatformChannel 的基本模式　234
12．3．2　使用 PlatformChannel 寫 Dart 端代碼　235
12．3．3　使用 PlatformChannel 編寫 Android 端代碼　239
12．3．4　使用 PlatformChannel 編寫 iOS 端的代碼　240
12．4　利用 PlatformView 實現位址詳情功能　241
12．4．1　瞭解 PlatformView 的基本模式　241
12．4．2　在 Dart 端使用 PlatformView　242
12．4．3　在 Android 端註冊 PlatformView　245
12．4．4　在 iOS 端註冊 PlatformView　246
12．5　使用封裝好的 PlatformView 構建隱私權原則頁面　248
12．5．1　引入 webview_flutter　249
12．5．2　使用 webview_flutter　249
12．6　小結　251
第13章 為我們的待辦事項應用增加完整的處理邏輯　252
13．1　完成多頁面之間的資料共用　252
13．1．1　利用公共父頁面共用資料　252
13．1．2　同步資料變化　254
13．2　為“登錄”頁面和“註冊”頁面增加網路請求　257
13．2．1　HTTP 的基礎知識　258
13．2．2　利用我們提供的伺服器完成網路請求　259
13．2．3　使用 http 模組發送網路請求　260
13．3　將資料緩存在本地　266
13．3．1　保存登錄狀態　266
13．3．2　保存清單資訊　269
13．4　將本地資料上傳到網路　274
13．4．1　將資料上傳到伺服器　274
13．4．2　從伺服器獲取資料　277
13．5　小結　281
第14章 是時候發佈啦　282
14．1　發佈應用前需要瞭解的一些基礎知識　282
14．2　發佈 Android 應用　283
14．2．1　在各個平臺註冊開發者帳號　283
14．2．2　發佈前檢查　283
14．2．3　修改 Icon　284
14．2．4　配置應用發佈簽名　286
14．3　發佈 iOS 應用　290
14．3．1　加入蘋果公司的開發者計畫　290
14．3．2　發佈前檢查　290
14．3．3　更改 Icon 和啟動圖　291
14．3．4　創建應用的歸檔　293
14．3．5　將應用發佈到 App Store　295
14．4　小結　295

第三部分　Flutter 的擴展功能
第15章 深入理解狀態管理　298
15．1　狀態管理的理論知識　298
15．1．1　什麼是狀態管理　298
15．1．2　Flutter 中的狀態管理　300
15．2　狀態管理的代碼實現　301
15．2．1　瞭解如何使用 InheritedWidget　301
15．2．2　InheritedWidget 的原理　303
15．2．3　使用 Provider 包完成狀態管理　306
15．3　小結　308
第16章 你不能錯過的優秀工具　309
16．1　代碼靜態分析　309
16．1．1　瞭解 IDE 中的 Dart Analysis　309
16．1．2　瞭解 Dart Analysis 的配置規則　310
16．2　代碼格式化　312
16．3　Dart DevTools　314
16．3．1　在 IDE 中打開 Dart DevTools　314
16．3．2　使用 Timeline 查看應用的性能損耗　316
16．3．3　使用 Memory 查看應用的記憶體佔用情況　317
16．4　小結　317
第17章 在 Flutter 中如何更好地與後臺交互　318
17．1　資料處理概覽　318
17．1．1　將 JSON 資料解析為 Map 資料　318
17．1．2　手動創建模型類處理 JSON 資料　319
17．2　使用工具生成代碼　319
17．2．1　使用 json_serializable 生成代碼　319
17．2．2　瞭解 json_serializable 的更多功能　321
17．3　小結　324
第18章 編寫測試代碼　325
18．1　準備工作　325
18．1．1　添加依賴　325
18．1．2　創建測試檔　326
18．2　單元測試　326
18．2．1　編寫測試代碼　326
18．2．2　使用 Mockito 模擬測試環境　327
18．2．3　運行單元測試　329
18．3　Widget 測試　330
18．3．1　編寫測試代碼　330
18．3．2　運行 Widget 測試　332
18．4　集成測試　332
18．4．1　添加集成測試的依賴　333
18．4．2　創建集成測試檔　333
18．4．3　啟動被集成應用　334
18．4．4　編寫集成測試代碼　334
18．4．5　記錄性能資料　335
18．4．6　運行集成測試　336
18．5　小結　336
第19章 性能優化　337
19．1　性能優化建議　337
19．1．1　控制 build 方法耗時　337
19．1．2　控制特效耗時　338
19．1．3　長列表優化　338
19．1．4　避免跳幀　338
19．2　性能分析　339
19．2．1　通過 profile 模式做性能分析　339
19．2．2　發現問題　340
19．2．3　GPU 耗時分析　342
19．2．4　UI 耗時分析　343
19．2．5　Widget 重建分析　343
19．2．6　建立指標　344
19．3　小結　344
第20章 Flutter 的歷程與未來　345
20．1　回顧 Flutter 的歷程　345
20．2　展望 Flutter 的未來　346
20．3　Flutter for Web　347
20．3．1　簡述　347
20．3．2　構建環境　348
20．3．3　使用 Web 運行待辦事項應用　348
20．3．4　初窺 flutter-web　349
20．4　Flutter For Desktop　351
20．5　小結　352

任宇傑

移動開發者，在利用 Flutter 構建跨端容器方面有比較深入的研究。

王志宇

移動開發者，具有多年跨端容器開發經驗。

魏國梁

移動開發者，在 Flutter 底層以及利用Flutter 進行自繪引擎建設上有比較深入的研究。

臧成威

移動開發者，經歷了從 iOS 5 至今的各個時代，對用戶端研發模式、多語言範式有著較深的理解。他是 Flutter 的首批嘗鮮者，對 Flutter 底層應用和自繪有著深入的研究。