Flutter小白開發(fā)：跨平臺客戶端應用開發(fā)學習路線

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