Flutter 開發之旅從南到北

楊加康

移動開發工程師，目前就職於小米，
在Android開發與前端開發方面具有豐富的理論基礎與實踐經驗，
精通Android系統的體系結構和應用層的開發。
他從2018年開始投身Flutter領域，是國內較早使用Flutter與Dart的開發人員。
在個人博客與相關技術社區發表過多篇高質量文章並獲得較高的關註量，
翻譯過《物聯網項目實戰：基於Android Things系統》。
個人的微信公眾號是“MeandNi”（其中不定期分享Android、Flutter、Java等方面的文章/視頻）。

第1章 認識Flutter 1
1.1　移動開發簡史　1
1.2　Flutter的架構　3
1.3　Flutter家族　4
1.3.1　Dart　5
1.3.2　Material Design　6
1.3.3　Fuchsia　7
1.3.4　Flutter Web　7
1.4　第一個應用—計數器　8
1.4.1　創建第一個應用　8
1.4.2　Flutter項目的結構　9
1.4.3　計數器應用的實現　10
1.5　原理淺析—3棵重要的樹　14
1.6　組件渲染過程簡述　16
1.7　小結與心得　18

第2章　Dart入門　19
2.1　“Hello, Dart”程序　19
2.2　重要概念　21
2.2.1　變量和常量　21
2.2.2　數據類型　23
2.2.3　運算符　28
2.2.4　流程控制　30
2.2.5　函數　34
2.2.6　註釋　37
2.3　面向對象編程　38
2.3.1　類　38
2.3.2　類方法　39
2.3.3　靜態變量與方法　40
2.3.4　繼承　41
2.3.5　抽象類　43
2.3.6　構造函數　43
2.3.7　枚舉類　47
2.4　小結與心得　48

第3章　一切皆為組件　49
3.1　有狀態組件與無狀態組件以及相關函數　49
3.1.1　有狀態組件和無狀態組件　49
3.1.2　setState()函數　52
3.1.3　initState()函數　53
3.1.4　dispose()函數　53
3.1.5　build()函數　54
3.2　內置的無狀態組件　54
3.2.1　Text組件　55
3.2.2　Image組件　58
3.2.3　Icon組件　59
3.2.4　Button組件　60
3.3　內置的有狀態組件　62
3.3.1　TextField組件　62
3.3.2　Form組件　66
3.3.3　Switch組件、Checkbox組件和Radio組件　69
3.4　常用容器組件　73
3.4.1　Container組件　74
3.4.2　Padding組件和Align組件　76
3.5　可滾動組件　77
3.5.1　ListView組件　78
3.5.2　GridView組件　80
3.6　結構化組件　82
3.6.1　Scaffold組件　82
3.6.2　AppBar組件與Drawer組件　86
3.7　根組件—WidgetsApp　93
3.8　元素樹　94
3.8.1　不變的組件　94
3.8.2　可變的元素　96
3.8.3　組件的Key對象　97
3.9　小結與心得　101

第4章　佈局管理　102
4.1　佈局約束　102
4.1.1　盒子協議　103
4.1.2　滑動協議　104
4.2　RenderObject樹　105
4.3　佈局約束實踐　106
4.3.1　單個子組件的佈局　106
4.3.2　多個子組件的佈局　107
4.3.3　可滾動的佈局　112
4.4　內置佈局組件　120
4.4.1　線性佈局組件　120
4.4.2　Stack佈局組件　124
4.4.3　Expanded佈局組件　126
4.4.4　Table佈局組件　127
4.5　小結與心得　129

第5章　Dart進階　130
5.1　混入　130
5.2　異步編程　133
5.2.1　事件循環　134
5.2.2　微任務隊列　135
5.2.3　事件隊列　135
5.2.4　異步函數　138
5.3　泛型　140
5.3.1　限制類型　140
5.3.2　泛型方法　141
5.4　小結與心得　141

第6章　動畫管理　142
6.1　動畫的4個要素　142
6.1.1　插值器　142
6.1.2　曲線模型　143
6.1.3　TickerProvider　144
6.1.4　Animation類　144
6.2　動畫組件　149
6.2.1　內置動畫組件　149
6.2.2　AnimatedWidget　151
6.2.3　AnimatedBuilder　153
6.3　隱式動畫組件　154
6.3.1　AnimatedContainer組件　155
6.3.2　AnimatedOpacity組件　157
6.3.3　自定義隱式動畫組件　158
6.3.4　TweenAnimationBuilder　160
6.4　小結與心得　161

第7章　手勢事件管理與畫布　163
7.1　手勢事件　163
7.1.1　手勢探測器　163
7.1.2　拖曳手勢　165
7.1.3　縮放手勢　169
7.2　手勢探測器　170
7.2.1　手勢消歧　171
7.2.2　使用手勢識別器　172
7.3　指針事件　174
7.4　自定義畫布　176
7.4.1　CustomPaint和CustomPainter　176
7.4.2　Canvas對象　178
7.4.3　Path對象　179
7.5　實戰：結合畫布與手勢實現交互式畫布　180
7.6　實戰：畫布與動畫的結合　183
7.7　小結與心得　186

第8章　路由管理　187
8.1　路由　188
8.1.1　組件路由　188
8.1.2　命名路由　190
8.1.3　彈出路由　193
8.2　路由棧　194
8.2.1　棧頂替換　194
8.2.2　棧頂清除　195
8.2.3　嵌套路由　197
8.3　路由動畫　201
8.4　路由數據　203
8.4.1　數據傳遞　203
8.4.2　數據返回　205
8.5　路由監聽器　206
8.6　彈窗路由　208
8.7　小結與心得　211

第9章　狀態管理　212
9.1　初探狀態　212
9.2　統一管理—InheritedWidget　214
9.2.1　數據倉庫　215
9.2.2　子組件註冊　218
9.2.3　狀態更新　220
9.2.4　ScopeModel　221
9.3　局部更新—BLoC　223
9.3.1　流　223
9.3.2　實現BLoC　225
9.3.3　提供BLoC實例　229
9.4　化繁為簡—provider庫　232
9.5　小結與心得　235

第10章　數據存儲與通信　236
10.1　數據持久化　236
10.1.1　讀寫文件　237
10.1.2　存儲鍵值對　241
10.1.3　數據庫　242
10.2　網絡通信　249
10.2.1　http庫　250
10.2.2　JSON　252
10.3　小結與心得　258

第11章　應用測試　259
11.1　單元測試　259
11.2　模擬請求　262
11.3　組件測試　264
11.3.1　查找組件　266
11.3.2　模擬用戶與組件的交互　267
11.4　驅動測試　270
11.4.1　列表滾動　274
11.4.2　性能跟蹤　274
11.5　小結與心得　277

第12章　完整案例　278
12.1　應用數據　279
12.2　主題樣式　280
12.3　路由管理　284
12.4　狀態管理方案　285
12.5　登錄頁面　289
12.6　商城首頁　294
12.6.1　商城首頁的幕布組件　298
12.6.2　商城首頁的菜單組件　305
12.6.3　商城首頁的商品展示　307
12.6.4　商城首頁的購物車　309
12.7　搜索頁面　316
12.8　結束語　321
附錄A　搭建Flutter開發環境　322
附錄B　安裝Dart SDK　332
附錄C　Pub包管理器　335