Flutter小白開發(fā)：跨平臺客戶端應(yīng)用開發(fā)學(xué)習(xí)路線

部分 開發(fā)準(zhǔn)備
第1 章 準(zhǔn)備開發(fā) 2
1.1 命令行界面 2
1.1.1 任務(wù)：Windows 系統(tǒng)下準(zhǔn)備命令行界面Cmder 2
1.1.2 任務(wù)：在macOS 系統(tǒng)下準(zhǔn)備命令行界面Terminal 3
1.1.3 任務(wù)：熟悉基本命令 3
1.1.4 理解環(huán)境變量目錄 5
1.1.5 知道命令來自哪里 5
1.1.6 命令行工具的幫助信息 6
1.1.7 命令行界面的配置文件 6
1.2 代碼編輯器 7
1.3 源代碼管理 8
第2章 開發(fā)環(huán)境 9
2.1 下載開發(fā)工具包 9
2.1.1 任務(wù)：macOS 系統(tǒng)下安裝Flutter 9
2.1.2 任務(wù)：Windows 系統(tǒng)下安裝Flutter 10
2.1.3 任務(wù)：配置使用國內(nèi)鏡像 11
2.2 準(zhǔn)備iOS 與macOS 應(yīng)用開發(fā)環(huán)境 11
2.2.1 任務(wù)：安裝Rosetta 12
2.2.2 任務(wù)：安裝Homebrew 12
2.2.3 任務(wù)：安裝與準(zhǔn)備Xcode 12
2.3 準(zhǔn)備Android平臺應(yīng)用開發(fā)環(huán)境 13
2.4 準(zhǔn)備設(shè)備模擬器 14
2.5 準(zhǔn)備Web 應(yīng)用開發(fā)環(huán)境 15
2.6 準(zhǔn)備代碼編輯器VSCode 15
2.7 創(chuàng)建Flutter 項目 16
2.7.1 任務(wù)：創(chuàng)建并運行Flutter 項目 16
2.7.2 任務(wù)：清理項目與源代碼管理 18
2.8 問題與思考 18
第3章 熟悉Dart 語言 21
3.1 準(zhǔn)備工作 21
3.2 變量 22
3.2.1 var 22
3.2.2 final 22
3.2.3 const 23
3.2.4 理解var、final 與const 的區(qū)別 23
3.3 類型 25
3.4 內(nèi)置類型 25
3.4.1 字符串 25
3.4.2 數(shù)字 26
3.4.3 布爾值 26
3.4.4 列表 27
3.4.5 集合 27
3.4.6 映射 28
3.5 函數(shù) 28
3.5.1 創(chuàng)建函數(shù) 29
3.5.2 執(zhí)行函數(shù) 29
3.5.3 函數(shù)參數(shù) 29
3.5.4 函數(shù)有多個參數(shù) 29
3.5.5 有名字的參數(shù) 30
3.5.6 必填參數(shù) 30
3.5.7 參數(shù)默認值 31
3.5.8 函數(shù)返回值 31
3.6 流程控制 31
3.6.1 if 語句 32
3.6.2 switch 語句 32
3.7 異常 34
3.7.1 拋出異常（throw） 34
3.7.2 捕獲異常（catch/on） 34
3.8 類 35
3.8.1 定義一個類 36
3.8.2 實例化一個類 36
3.8.3 屬性 36
3.8.4 構(gòu)造方法 37
3.8.5 this 關(guān)鍵字 37
3.8.6 帶名字的構(gòu)造方法 38
3.8.7 方法 38
3.8.8 繼承 39
3.8.9 類屬性 39
3.8.10 類方法 40
3.9 泛型 40
3.10 庫 41
3.10.1 使用內(nèi)置庫 41
3.10.2 指定庫前綴 41
3.10.3 導(dǎo)入部分庫 42
3.10.4 導(dǎo)入開發(fā)者個人庫里的資源 42
3.11 Future 42
3.11.1 定義異步函數(shù) 43
3.11.2 使用異步函數(shù)提供的值 43
3.11.3 處理異步函數(shù)遇到的錯誤 44
第4章 包管理 45
4.1 包（Package） 45
4.2 pubspec.yaml 文件 45
4.3 安裝包 46
4.3.1 解決包依賴問題 46
4.3.2 dependencies 屬性 46
4.3.3 版本號 47
4.3.4 pubspec.lock 文件 47
4.3.5 package_config.json 文件 47
4.4 使用包 48
4.5 升級包 48
第二部分 Flutter基礎(chǔ)
第5章 基本部件 52
5.1 準(zhǔn)備 52
5.1.1 任務(wù)：準(zhǔn)備項目（widget） 52
5.1.2 任務(wù)：準(zhǔn)備應(yīng)用入口 52
5.2 小部件（Widget） 53
5.3 自定義一個無狀態(tài)的小部件 54
5.4 Text（文本） 56
5.5 RichText（富文本） 58
5.6 Image（圖像） 59
5.6.1 任務(wù)：顯示資源包里的圖像 60
5.6.2 任務(wù)：顯示來自網(wǎng)絡(luò)的圖像 61
5.6.3 任務(wù)：調(diào)整圖像的顯示 62
5.7 Container（容器） 63
5.7.1 任務(wù)：使用Container 小部件 64
5.7.2 任務(wù)：裝飾容器 66
5.8 整理項目 69
第6章 頁面結(jié)構(gòu) 70
6.1 準(zhǔn)備項目（page-structure） 70
6.2 MaterialApp 70
6.2.1 任務(wù)：創(chuàng)建Material 應(yīng)用 70
6.2.2 任務(wù)：使用圖標(biāo)（Icon） 71
6.2.3 任務(wù)：使用按鈕（ElevatedButton） 72
6.2.4 任務(wù)：定制應(yīng)用的主題樣式 73
6.3 Scaffold（頁面結(jié)構(gòu)） 75
6.4 AppBar（應(yīng)用欄） 76
6.5 TabBar（標(biāo)簽欄） 77
6.6 BottomNavigationBar（底部導(dǎo)航欄） 79
6.6.1 任務(wù)：設(shè)置底部導(dǎo)航欄 79
6.6.2 任務(wù)：把App 轉(zhuǎn)換成有狀態(tài)小部件（StatefulWidget） 80
6.6.3 任務(wù)：單擊底部導(dǎo)航欄項目，切換當(dāng)前活動項目 81
6.6.4 任務(wù)：單擊底部導(dǎo)航欄項目，切換顯示小部件 82
6.6.5 任務(wù)：單擊底部導(dǎo)航欄項目，動態(tài)顯示或隱藏AppBar 83
6.7 FloatingActionButton（漂浮動作按鈕） 84
6.8 整理項目 85
第7章 定義部件 86
7.1 準(zhǔn)備 86
7.1.1 任務(wù)：準(zhǔn)備項目（define-widget） 86
7.1.2 任務(wù)：配置VSCode 編輯器代碼片斷 87
7.2 AppPageHeader（頁面頭部） 88
7.3 AppLogo（應(yīng)用標(biāo)志） 89
7.4 AppPageMain（頁面主體） 90
7.5 PostIndex（內(nèi)容索引） 93
7.6 AppPageBottom（頁面底部） 94
7.7 AppFloatingActionButton（漂浮動作按鈕） 96
7.8 目錄結(jié)構(gòu) 97
7.9 小部件樹 97
7.10 整理項目 98
第8章 彈窗對話 99
8.1 準(zhǔn)備項目（modal-dialog） 99
8.2 BottomSheet（底部面板） 99
8.2.1 任務(wù)：顯示頁面底部面板 99
8.2.2 任務(wù)：用漂浮動作按鈕顯示與關(guān)閉底部面板 101
8.3 AlertDialog（警告對話框） 103
8.4 SnackBar（消息提示欄） 105
8.5 Drawer（邊欄抽屜） 106
8.5.1 任務(wù)：使用邊欄抽屜 107
8.5.2 任務(wù)：設(shè)置邊欄抽屜上顯示的內(nèi)容（ListView 與ListTile） 108
8.6 PopupMenuButton（彈出菜單按鈕） 111
8.7 整理項目 113
第9章 頁面布局 114
9.1 準(zhǔn)備 114
9.1.1 任務(wù)：準(zhǔn)備項目（layout） 114
9.1.2 任務(wù)：準(zhǔn)備練習(xí)頁面 114
9.2 約束 116
9.2.1 任務(wù)：理解小部件的約束 116
9.2.2 任務(wù)：準(zhǔn)備一個布局演示項目小部件 119
9.2.3 任務(wù)：使用安全區(qū)域（SafeArea）和尺寸盒子（SizedBox） 120
9.3 Align（對齊） 121
9.4 Column（欄/列） 122
9.5 Row（行/排） 124
9.6 Expanded（擴展空間） 126
9.7 Stack（堆） 127
9.8 Positioned（定位） 128
9.9 整理項目 128
第10 章 表單元素 129
10.1 準(zhǔn)備 129
10.1.1 任務(wù)：準(zhǔn)備項目（input） 129
10.1.2 任務(wù)：準(zhǔn)備練習(xí)小部件PlaygroundInput 129
10.2 ElevatedButton（按鈕） 130
10.3 TextField（文本字段） 133
10.3.1 任務(wù)：使用文本字段小部件 133
10.3.2 任務(wù)：獲取文本字段里的數(shù)據(jù) 135
10.4 TextFormField（文本表單字段） 137
10.4.1 任務(wù)：使用文本表單字段 137
10.4.2 任務(wù)：驗證文本表單字段數(shù)據(jù) 138
10.5 TextEditingController（文本編輯控制器） 141
10.6 Form（表單） 143
10.7 問題與思考 144
10.8 整理項目 144
第11章 路由導(dǎo)航（一） 145
11.1 準(zhǔn)備 145
11.1.1 任務(wù)：準(zhǔn)備項目（routing） 145
11.1.2 任務(wù)：準(zhǔn)備導(dǎo)航與路由演示小部件 145
11.2 路由與導(dǎo)航器 146
11.3 用命令式管理路由 146
11.4 默認路由 149
11.5 路由表 151
11.6 生成路由時的回調(diào) 152
11.6.1 任務(wù)：使用生成路由回調(diào)onGenerateRoute 152
11.6.2 任務(wù)：在路由名字中提取參數(shù) 154
11.7 問題與思考 157
11.8 整理項目 157
第12章 狀態(tài)管理 158
12.1 準(zhǔn)備 158
12.1.1 任務(wù)：準(zhǔn)備項目（state-management） 158
12.1.2 任務(wù)：準(zhǔn)備狀態(tài)管理演示小部件 158
12.1.3 任務(wù)：安裝provider 159
12.2 準(zhǔn)備數(shù)據(jù) 160
12.3 提供數(shù)據(jù) 161
12.3.1 確定提供數(shù)據(jù)的位置 162
12.3.2 任務(wù)：用Provider 提供數(shù)據(jù)與方法 162
12.4 使用數(shù)據(jù) 163
12.5 數(shù)據(jù)變化 165
12.5.1 任務(wù)：用ChangeNotifierProvider提供數(shù)據(jù)與方法 165
12.5.2 任務(wù)：在小部件里使用Provider 提供的數(shù)據(jù)與方法（Consumer） 167
12.6 問題與思考 168
12.7 整理項目 168
第13章 路由導(dǎo)航（二） 169
13.1 準(zhǔn)備項目（routing_2） 169
13.2 頁面 169
13.2.1 任務(wù)：使用Navigator 聲明式接口（Pages API） 169
13.2.2 任務(wù)：使用MultiProvider 提供多個數(shù)據(jù)類 171
13.2.3 任務(wù)：動態(tài)添加與移除頁面 173
13.3 路由器 176
13.3.1 任務(wù)：創(chuàng)建路由器代表（RouterDelegate） 176
13.3.2 任務(wù)：使用路由器管理路由（Router） 177
13.3.3 任務(wù)：應(yīng)用狀態(tài)變化時通知Router 重建Navigator 180
13.4 路由配置 181
13.4.1 調(diào)試Web 應(yīng)用 181
13.4.2 任務(wù)：定義路由配置類型 181
13.4.3 任務(wù)：把路由信息轉(zhuǎn)換成自定義的路由配置（parseRouteInformation） 182
13.4.4 任務(wù)：根據(jù)路由配置數(shù)據(jù)修改應(yīng)用狀態(tài)（setNewRoutePath） 184
13.4.5 任務(wù)：把路由配置轉(zhuǎn)換成路由信息（restoreRoute Information） 185
13.5 問題與思考 188
13.6 整理項目 188
第14章 網(wǎng)絡(luò)請求 189
14.1 準(zhǔn)備 189
14.1.1 任務(wù)：準(zhǔn)備項目（http） 189
14.1.2 任務(wù)：準(zhǔn)備網(wǎng)絡(luò)請求演示小部件 189
14.2 http 190
14.2.1 任務(wù)：安裝http 并使用資源 190
14.2.2 任務(wù)：請求服務(wù)端接口獲取數(shù)據(jù) 191
14.2.3 任務(wù)：將JSON 數(shù)據(jù)轉(zhuǎn)換成自定義類型 193
14.2.4 任務(wù)：請求服務(wù)端接口創(chuàng)建內(nèi)容（用戶） 195
14.2.5 任務(wù)：發(fā)送用戶登錄請求 197
14.2.6 任務(wù)：請求服務(wù)端接口更新內(nèi)容（用戶） 200
14.3 序列化 202
14.4 問題與思考 205
14.5 整理項目 205
第三部分 Flutter實踐
第15章 內(nèi)容列表 208
15.1 準(zhǔn)備項目（list） 208
15.2 應(yīng)用配置 208
15.3 創(chuàng)建內(nèi)容列表 210
15.3.1 任務(wù)：創(chuàng)建內(nèi)容列表小部件（PostList） 210
15.3.2 任務(wù)：定義并提供獲取內(nèi)容列表數(shù)據(jù)方法 211
15.3.3 任務(wù)：請求內(nèi)容列表數(shù)據(jù) 213
15.3.4 任務(wù)：定義內(nèi)容數(shù)據(jù)類型 214
15.3.5 任務(wù)：轉(zhuǎn)換生成一組內(nèi)容（Post）類型的數(shù)據(jù) 217
15.3.6 任務(wù)：使用ListView 構(gòu)建內(nèi)容列表視圖 220
15.4 整理項目 221
第16章 列表項目 222
16.1 準(zhǔn)備項目（list-item） 222
16.2 定義列表項目 222
16.2.1 任務(wù)：創(chuàng)建內(nèi)容列表項目小部件（PostListItem） 222
16.2.2 任務(wù)：定義內(nèi)容媒體小部件（PostMedia） 224
16.2.3 任務(wù)：定義內(nèi)容頭部小部件（PostHeader） 226
16.2.4 任務(wù)：定義用戶頭像小部件（UserAvatar） 228
16.2.5 任務(wù)：定義內(nèi)容動作小部件（PostActions） 230
16.3 問題與思考 233
16.4 整理項目 234
第17章 內(nèi)容頁面 235
17.1 準(zhǔn)備項目（post） 235
17.2 開發(fā)單個內(nèi)容頁面 235
17.2.1 任務(wù)：處理單擊內(nèi)容列表項目圖像 235
17.2.2 任務(wù)：定義單個內(nèi)容數(shù)據(jù)模型（PostShowModel） 237
17.2.3 任務(wù)：單擊內(nèi)容項目圖像時顯示內(nèi)容頁面 240
17.2.4 任務(wù)：定義內(nèi)容頁面主體小部件（PageShowMain） 243
17.2.5 任務(wù)：定義內(nèi)容正文小部件（PostContent） 247
17.2.6 任務(wù)：定義內(nèi)容標(biāo)簽小部件（PostTags） 249
17.2.7 任務(wù)：配置路由器處理內(nèi)容頁面 251
17.2.8 任務(wù)：請求內(nèi)容頁面需要的數(shù)據(jù) 254
17.3 問題與思考 256
17.4 整理項目 259
第18章 驗證身份 260
18.1 準(zhǔn)備項目（auth） 260
18.2 登錄頁面 260
18.2.1 任務(wù)：添加用戶登錄頁面 260
18.2.2 任務(wù)：準(zhǔn)備登錄表單小部件（AuthLoginForm） 263
18.3 請求登錄 270
18.3.1 任務(wù)：定義用戶登錄相關(guān)類型（LoginData，Auth） 270
18.3.2 任務(wù)：自定義網(wǎng)絡(luò)請求異常（HttpException） 271
18.3.3 任務(wù)：定義身份驗證模型（AuthModel） 272
18.3.4 任務(wù)：請求用戶登錄 274
18.4 問題與思考 276
18.5 整理項目 276
第19章 狀態(tài)管理 277
19.1 準(zhǔn)備項目（state-management_2） 277
19.2 改造創(chuàng)建Provider 的方式 277
19.2.1 任務(wù)：使用Provider 的value 構(gòu)造方法提供值 277
19.2.2 任務(wù)：在單獨的文件里定義要提供的Provider 278
19.3 在用戶設(shè)備上存取數(shù)據(jù) 279
19.3.1 任務(wù)：用shared preferences 插件記住登錄狀態(tài) 279
19.3.2 任務(wù)：應(yīng)用啟動以后恢復(fù)登錄狀態(tài) 282
19.4 使用代理Provider 解決依賴 285
19.4.1 任務(wù)：定義應(yīng)用服務(wù)與接口客戶端（AppService 和ApiHttpClient） 285
19.4.2 任務(wù)：用ChangeNotifierProxyProvider解決依賴 287
19.4.3 任務(wù)：改造PostIndexModel 用apiHttpClient 發(fā)送請求 288
19.5 整理項目 289
第20章 點贊內(nèi)容 290
20.1 準(zhǔn)備項目（like） 290
20.2 點贊內(nèi)容相關(guān)操作 290
20.2.1 任務(wù)：使用GestureDetector 處理手勢動作 290
20.2.2 任務(wù)：定義點贊內(nèi)容模型 291
20.2.3 任務(wù)：定義取消點贊模型 292
20.2.4 任務(wù)：定義提供點贊的Provider 293
20.2.5 任務(wù)：處理用戶點贊動作 294
20.2.6 任務(wù)：處理用戶取消點贊動作 296
20.3 問題與思考 298
20.4 整理項目 298
第21章 列表布局 299
21.1 準(zhǔn)備項目（post-list-layout） 299
21.2 內(nèi)容列表布局 299
21.2.1 任務(wù)：準(zhǔn)備熱門內(nèi)容列表 299
21.2.2 任務(wù)：準(zhǔn)備內(nèi)容列表布局相關(guān)數(shù)據(jù)與方法 301
21.2.3 任務(wù)：設(shè)置與存儲內(nèi)容列表布局 302
21.2.4 任務(wù)：準(zhǔn)備網(wǎng)格內(nèi)容列表 303
21.2.5 任務(wù)：準(zhǔn)備多種布局的內(nèi)容列表項目 305
21.2.6 任務(wù)：恢復(fù)內(nèi)容列表布局 308
21.3 問題與思考 310
21.4 整理項目 312
第22章 發(fā)布內(nèi)容表單 313
22.1 準(zhǔn)備項目（post-create） 313
22.2 創(chuàng)建并發(fā)布內(nèi)容 313
22.2.1 任務(wù)：定義創(chuàng)建內(nèi)容數(shù)據(jù)模型（PostCreateModel） 313
22.2.2 任務(wù)：改進AppTextField 自定義小部件 316
22.2.3 任務(wù)：重新定義異常 317
22.2.4 任務(wù)：準(zhǔn)備創(chuàng)建內(nèi)容頁面（PostCreate） 318
22.2.5 任務(wù)：定義創(chuàng)建內(nèi)容表單小部件（PostCreateForm） 319
22.2.6 任務(wù)：發(fā)布內(nèi)容 323
22.3 問題與思考 326
22.4 整理項目 326
第23章 選擇并上傳文件 327
23.1 準(zhǔn)備項目（file-upload） 327
23.2 選擇文件 327
23.2.1 任務(wù)：安裝文件選擇器插件（file_picker） 327
23.2.2 任務(wù)：選擇照片應(yīng)用里的圖像文件 328
23.3 上傳文件 330
23.3.1 任務(wù)：準(zhǔn)備上傳文件用的請求 330
23.3.2 任務(wù)：定義上傳文件需要的相關(guān)數(shù)據(jù)與方法 331
23.3.3 任務(wù)：定義選擇圖像文件小部件（PostCreateMedia） 332
23.3.4 任務(wù)：使用進度指示器（CircularProgressIndicator） 335
23.3.5 任務(wù)：用選擇的文件名稱作為內(nèi)容默認標(biāo)題 335
23.3.6 任務(wù)：提示是否保留未發(fā)布內(nèi)容 336
23.3.7 任務(wù)：創(chuàng)建內(nèi)容后上傳文件 339
23.4 整理項目 340
第24章 主題樣式 341
24.1 準(zhǔn)備項目（theme） 341
24.2 設(shè)置主題樣式 341
24.2.1 任務(wù)：設(shè)置主題顏色 341
24.2.2 任務(wù)：設(shè)置圖標(biāo)主題（IconThemeData） 343
24.2.3 任務(wù)：設(shè)置文本主題（TextTheme） 344
24.2.4 任務(wù)：設(shè)置應(yīng)用欄主題（AppBarTheme） 346
24.2.5 任務(wù)：根據(jù)平臺暗色模式設(shè)置小部件樣式 348
24.2.6 任務(wù)：設(shè)置標(biāo)簽欄主題（TabBarTheme） 350
24.2.7 任務(wù)：設(shè)置底部導(dǎo)航欄主題（BottomNavigationBarThemeData） 351
24.2.8 任務(wù)：設(shè)置消息提示欄主題（SnackBarTheme） 353
24.2.9 任務(wù)：設(shè)置按鈕主題（ElevatedButtonThemeData） 354
24.3 問題與思考 355
24.4 整理項目 356
第25章 發(fā)布應(yīng)用 357
25.1 準(zhǔn)備項目（release） 357
25.2 在蘋果應(yīng)用商店發(fā)布應(yīng)用 357
25.2.1 任務(wù)：加入蘋果開發(fā)者計劃 357
25.2.2 任務(wù)：用真實設(shè)備調(diào)試應(yīng)用（iOS） 358
25.2.3 任務(wù)：應(yīng)用小圖標(biāo)（iOS） 360
25.2.4 任務(wù)：應(yīng)用啟動屏幕（iOS） 361
25.2.5 任務(wù)：注冊應(yīng)用ID 362
25.2.6 任務(wù)：在App Store Connect 創(chuàng)建應(yīng)用 363
25.2.7 任務(wù)：構(gòu)建應(yīng)用（iOS） 364
25.2.8 任務(wù)：修正問題后重新構(gòu)建 366
25.2.9 任務(wù)：提交發(fā)布應(yīng)用（App Store Connect） 367
25.2.10 任務(wù)：通過TestFlight 安裝測試應(yīng)用 369
25.3 問題與思考 370
25.4 整理項目 371
第26章 注冊用戶 372
26.1 準(zhǔn)備項目（user-create） 372
26.2 注冊用戶界面 372
26.2.1 任務(wù)：準(zhǔn)備創(chuàng)建用戶模型（UserCreateModel） 372
26.2.2 任務(wù)：用Provider 提供創(chuàng)建用戶模型 373
26.2.3 任務(wù)：準(zhǔn)備創(chuàng)建用戶表單小部件（UserCreateForm） 374
26.2.4 任務(wù)：修改用戶未登錄時的頁面 376
26.2.5 任務(wù)：修改應(yīng)用重新編譯并提交審核 378
26.3 整理項目 380
第27章 下一站 381