Flutter 小白開發 — 跨平臺客戶端應用開發學習路線

第一部分 開發準備

第1 章 準備開發 2

1.1 命令行界面 2

1.1.1 任務：Windows 系統下準備命令行界面Cmder 2

1.1.2 任務：在macOS 系統下準備命令行界面Terminal 3

1.1.3 任務：熟悉基本命令 3

1.1.4 理解環境變量目錄 5

1.1.5 知道命令來自哪裡 5

1.1.6 命令行工具的幫助信息 6

1.1.7 命令行界面的配置文件 6

1.2 代碼編輯器 7

1.3 源代碼管理 8

第2章 開發環境 9

2.1 下載開發工具包 9

2.1.1 任務：macOS 系統下安裝Flutter 9

2.1.2 任務：Windows 系統下安裝Flutter 10

2.1.3 任務：配置使用國內鏡像 11

2.2 準備iOS 與macOS 應用開發環境 11

2.2.1 任務：安裝Rosetta 12

2.2.2 任務：安裝Homebrew 12

2.2.3 任務：安裝與準備Xcode 12

2.3 準備Android平臺應用開發環境 13

2.4 準備設備模擬器 14

2.5 準備Web 應用開發環境 15

2.6 準備代碼編輯器VSCode 15

2.7 創建Flutter 項目 16

2.7.1 任務：創建並運行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 的區別 23

3.3 類型 25

3.4 內置類型 25

3.4.1 字符串 25

3.4.2 數字 26

3.4.3 布爾值 26

3.4.4 列表 27

3.4.5 集合 27

3.4.6 映射 28

3.5 函數 28

3.5.1 創建函數 29

3.5.2 執行函數 29

3.5.3 函數參數 29

3.5.4 函數有多個參數 29

3.5.5 有名字的參數 30

3.5.6 必填參數 30

3.5.7 參數默認值 31

3.5.8 函數返回值 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 使用內置庫 41

3.10.2 指定庫前綴 41

3.10.3 導入部分庫 42

3.10.4 導入開發者個人庫里的資源 42

3.11 Future 42

3.11.1 定義異步函數 43

3.11.2 使用異步函數提供的值 43

3.11.3 處理異步函數遇到的錯誤 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 自定義一個無狀態的小部件 54

5.4 Text（文本） 56

5.5 RichText（富文本） 58

5.6 Image（圖像） 59

5.6.1 任務：顯示資源包里的圖像 60

5.6.2 任務：顯示來自網絡的圖像 61

5.6.3 任務：調整圖像的顯示 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 任務：創建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 轉換成有狀態小部件（StatefulWidget） 80

6.6.3 任務：單擊底部導航欄項目，切換當前活動項目 81

6.6.4 任務：單擊底部導航欄項目，切換顯示小部件 82

6.6.5 任務：單擊底部導航欄項目，動態顯示或隱藏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（內容索引） 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 任務：設置邊欄抽屜上顯示的內容（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 任務：使用安全區域（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 任務：獲取文本字段里的數據 135

10.4 TextFormField（文本表單字段） 137

10.4.1 任務：使用文本表單字段 137

10.4.2 任務：驗證文本表單字段數據 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 生成路由時的回調 152

11.6.1 任務：使用生成路由回調onGenerateRoute 152

11.6.2 任務：在路由名字中提取參數 154

11.7 問題與思考 157

11.8 整理項目 157

第12章 狀態管理 158

12.1 準備 158

12.1.1 任務：準備項目（state-management） 158

12.1.2 任務：準備狀態管理演示小部件 158

12.1.3 任務：安裝provider 159

12.2 準備數據 160

12.3 提供數據 161

12.3.1 確定提供數據的位置 162

12.3.2 任務：用Provider 提供數據與方法 162

12.4 使用數據 163

12.5 數據變化 165

12.5.1 任務：用ChangeNotifierProvider提供數據與方法 165

12.5.2 任務：在小部件里使用Provider 提供的數據與方法（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 提供多個數據類 171

13.2.3 任務：動態添加與移除頁面 173

13.3 路由器 176

13.3.1 任務：創建路由器代表（RouterDelegate） 176

13.3.2 任務：使用路由器管理路由（Router） 177

13.3.3 任務：應用狀態變化時通知Router 重建Navigator 180

13.4 路由配置 181

13.4.1 調試Web 應用 181

13.4.2 任務：定義路由配置類型 181

13.4.3 任務：把路由信息轉換成自定義的路由配置（parseRouteInformation） 182

13.4.4 任務：根據路由配置數據修改應用狀態（setNewRoutePath） 184

13.4.5 任務：把路由配置轉換成路由信息（restoreRoute Information） 185

13.5 問題與思考 188

13.6 整理項目 188

第14章 網絡請求 189

14.1 準備 189

14.1.1 任務：準備項目（http） 189

14.1.2 任務：準備網絡請求演示小部件 189

14.2 http 190

14.2.1 任務：安裝http 並使用資源 190

14.2.2 任務：請求服務端接口獲取數據 191

14.2.3 任務：將JSON 數據轉換成自定義類型 193

14.2.4 任務：請求服務端接口創建內容（用戶） 195

14.2.5 任務：發送用戶登錄請求 197

14.2.6 任務：請求服務端接口更新內容（用戶） 200

14.3 序列化 202

14.4 問題與思考 205

14.5 整理項目 205

第三部分 Flutter實踐

第15章 內容列表 208

15.1 準備項目（list） 208

15.2 應用配置 208

15.3 創建內容列表 210

15.3.1 任務：創建內容列表小部件（PostList） 210

15.3.2 任務：定義並提供獲取內容列表數據方法 211

15.3.3 任務：請求內容列表數據 213

15.3.4 任務：定義內容數據類型 214

15.3.5 任務：轉換生成一組內容（Post）類型的數據 217

15.3.6 任務：使用ListView 構建內容列表視圖 220

15.4 整理項目 221

第16章 列表項目 222

16.1 準備項目（list-item） 222

16.2 定義列表項目 222

16.2.1 任務：創建內容列表項目小部件（PostListItem） 222

16.2.2 任務：定義內容媒體小部件（PostMedia） 224

16.2.3 任務：定義內容頭部小部件（PostHeader） 226

16.2.4 任務：定義用戶頭像小部件（UserAvatar） 228

16.2.5 任務：定義內容動作小部件（PostActions） 230

16.3 問題與思考 233

16.4 整理項目 234

第17章 內容頁面 235

17.1 準備項目（post） 235

17.2 開發單個內容頁面 235

17.2.1 任務：處理單擊內容列表項目圖像 235

17.2.2 任務：定義單個內容數據模型（PostShowModel） 237

17.2.3 任務：單擊內容項目圖像時顯示內容頁面 240

17.2.4 任務：定義內容頁面主體小部件（PageShowMain） 243

17.2.5 任務：定義內容正文小部件（PostContent） 247

17.2.6 任務：定義內容標簽小部件（PostTags） 249

17.2.7 任務：配置路由器處理內容頁面 251

17.2.8 任務：請求內容頁面需要的數據 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 任務：自定義網絡請求異常（HttpException） 271

18.3.3 任務：定義身份驗證模型（AuthModel） 272

18.3.4 任務：請求用戶登錄 274

18.4 問題與思考 276

18.5 整理項目 276

第19章 狀態管理 277

19.1 準備項目（state-management_2） 277

19.2 改造創建Provider 的方式 277

19.2.1 任務：使用Provider 的value 構造方法提供值 277

19.2.2 任務：在單獨的文件里定義要提供的Provider 278

19.3 在用戶設備上存取數據 279

19.3.1 任務：用shared preferences 插件記住登錄狀態 279

19.3.2 任務：應用啟動以後恢復登錄狀態 282

19.4 使用代理Provider 解決依賴 285

19.4.1 任務：定義應用服務與接口客戶端（AppService 和ApiHttpClient） 285

19.4.2 任務：用ChangeNotifierProxyProvider解決依賴 287

19.4.3 任務：改造PostIndexModel 用apiHttpClient 發送請求 288

19.5 整理項目 289

第20章 點贊內容 290

20.1 準備項目（like） 290

20.2 點贊內容相關操作 290

20.2.1 任務：使用GestureDetector 處理手勢動作 290

20.2.2 任務：定義點贊內容模型 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 內容列表佈局 299

21.2.1 任務：準備熱門內容列表 299

21.2.2 任務：準備內容列表佈局相關數據與方法 301

21.2.3 任務：設置與存儲內容列表佈局 302

21.2.4 任務：準備網格內容列表 303

21.2.5 任務：準備多種佈局的內容列表項目 305

21.2.6 任務：恢復內容列表佈局 308

21.3 問題與思考 310

21.4 整理項目 312

第22章 發布內容表單 313

22.1 準備項目（post-create） 313

22.2 創建並發布內容 313

22.2.1 任務：定義創建內容數據模型（PostCreateModel） 313

22.2.2 任務：改進AppTextField 自定義小部件 316

22.2.3 任務：重新定義異常 317

22.2.4 任務：準備創建內容頁面（PostCreate） 318

22.2.5 任務：定義創建內容表單小部件（PostCreateForm） 319

22.2.6 任務：發布內容 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 任務：定義上傳文件需要的相關數據與方法 331

23.3.3 任務：定義選擇圖像文件小部件（PostCreateMedia） 332

23.3.4 任務：使用進度指示器（CircularProgressIndicator） 335

23.3.5 任務：用選擇的文件名稱作為內容默認標題 335

23.3.6 任務：提示是否保留未發布內容 336

23.3.7 任務：創建內容後上傳文件 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 任務：根據平臺暗色模式設置小部件樣式 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章 發布應用 357

25.1 準備項目（release） 357

25.2 在蘋果應用商店發布應用 357

25.2.1 任務：加入蘋果開發者計劃 357

25.2.2 任務：用真實設備調試應用（iOS） 358

25.2.3 任務：應用小圖標（iOS） 360

25.2.4 任務：應用啟動屏幕（iOS） 361

25.2.5 任務：註冊應用ID 362

25.2.6 任務：在App Store Connect 創建應用 363

25.2.7 任務：構建應用（iOS） 364

25.2.8 任務：修正問題後重新構建 366

25.2.9 任務：提交發布應用（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 任務：準備創建用戶模型（UserCreateModel） 372

26.2.2 任務：用Provider 提供創建用戶模型 373

26.2.3 任務：準備創建用戶表單小部件（UserCreateForm） 374

26.2.4 任務：修改用戶未登錄時的頁面 376

26.2.5 任務：修改應用重新編譯並提交審核 378

26.3 整理項目 380

第27章 下一站 381