Flutter 之旅

前言
Day 1初識Flutter與技能儲備1
1.1 Flutter初始項目分析1
1.1.1 Flutter初始項目結構1
1.1.2入口文件及MyApp分析2
1.1.3 MyHomePage與_MyHomePageState分析5
1.1.4 pubspec.yaml文件6
1.2基本Debug技能7
1.2.1斷點和放行7
1.2.2變量查詢和喚醒程序8
1.2.3 Debug要點補充9
1.3輔助技能儲備10
1.3.1三個實用工具10
1.3.2片段代碼和快速重構12
1.3.3三個基礎知識QA 14
1.4 Widget知識儲備15
1.4.1命令式UI編程與聲明式UI編程16
1.4.2認識Widget體系16
1.4.3 Widget源碼初識18
1.4.4組件的提取抽離21

Day 2 Dart實用語法速覽23
2.1基礎語法23
2.1.1常用的數據類型23
2.1.2變量與常量26
2.1.3函數的使用27
2.2通過Size類看Dart中的面向對象30
2.3其他語法點34
2.3.1常用符號與關鍵字34
2.3.2庫的使用和可見性35
2.3.3泛型36
2.3.4異步37
2.3.5異常處理38

Day 3界面風格和簡單繪製39
3.1 Material風格40
3.1. 1 Scaffold和BottomNavigationBar 40
3.1.2 TabBar和TabBarView 41
3.1.3標題欄按鈕和菜單組件42
3.1.4彈出對話框43
3.1.5界面的左右滑頁43
3.1.6 showSnackBar和showBottomSheet 44
3.2 Cupertino風格45
3.2 .1 CupertinoPageScaffold和CupertinoTabScaffold 46
3.2.2 CupertinoNavigationBar和CupertinoTabBar 46
3.2.3 CupertinoTabView 47
3.2.4 CupertinoAlertDialog和showCupertinoModalPopup 47
3.3認識CustomPainter繪製49
3.3.1繪製網格49
3.3.2 Canvas初級繪製50
3.3.3移植繪製n角星52
3.3.4移植繪製粒子數字54

Day 4基礎Widget 56
4.1 Text組件56
4.1.1 Text的基本使用56
4.1.2 Text的陰影和裝飾線57
4.1.3文字方向、對齊和溢出處理58
4.1.4 RichText的使用59
4.1.5 RichText與Text.rich 60
4.2 Image組件60
4.2.1 Image資源的加載61
4.2.2圖片的適應模式62
4.2.3圖片顏色及混合模式63
4.2.4圖片對齊模式及重複模式63
4.2.5用centerSlice實現圖片局部放大64
4.3 Container的使用65
4.3.1 Container的基本使用65
4.3.2 Padding的使用66
4.3.3 Container的邊線裝飾66
4.3.4 Container的約束和變換67
4.3.5 Container與佈局的淵源68
4.4常用多子佈局71
4.4.1圖解Flex佈局71
4.4.2 Stack佈局75
4.4.3 Wrap包裹佈局76

Day 5列表與滑動79
5.1組件封裝79
5.1.1靜態佈局79
5.1.2頭像組件封裝80
5.1.3條目組件封裝81
5.1.4封裝聊天信息組件82
5.2 ListView的使用84
5.2.1基本用法85
5.2.2 ListView的構造及分隔線85
5.2.3 ListView的不同樣式87
5.2.4 ListView的上拉與下拉87
5.3常用滑動組件90
5.3.1單子滑動組件SingleChildScrollView 90
5.3.2滑動控制器ScrollController 92
5.3.3滑頁組件PageView 94
5.3.4網格組件GridView 97
5.4 Sliver家族99
5.4.1 SliverAppBar的使用100
5.4.2 Sliver中的列表佈局、網格佈局及普通佈局101
5.4.3吸頂效果SliverPersistentHeader 103

Day 6動畫與路由106
6.1動畫閒談106
6.1.1 FPS 106
6.1. 2動畫控制器AnimationController 107
6.1.3運動盒108
6.2 Flutter動畫詳解111
6.2.1 Animation和Animatable 111
6.2.2動畫狀態監聽和Animation方法116
6.2.3動畫簡化和封裝117
6.2.4封裝強化版FlutterContainer 118
6.3路由與導航122
6.3.1打開路由122
6.3.2路由的傳參125
6.3.3路由的跳轉動畫128
6.3.4 Hero跳轉動畫130

Day 7手勢組件與自定義組件132
7.1手勢組件與使用132
7.1.1 InkWell水波紋的使用132
7.1.2 GestureDetector的使用133
7.1.3手寫板的實現135
7.2根據現有組件實現自定義組件137
7.2.1切換Widget組件137
7.2.2顏色選擇圓鈕組件ColorChooser 139
7.2.3函數運動組件MathRunner 142
7.3繪製自定義組件143
7.3.1能力分析組件AbilityWidget 143
7.3.2圖片放大組件BiggerView 147
7.3.3波紋線RhythmView 150

Day 8 Flutter渲染機制153
8.1認識三棵樹153
8.1.1漫談Widget、Element、RenderObject 154
8.1.2認識RenderObject和Element 156
8.1.3三棵樹結構158
8.1.4三個根結點的初始化159
8.2 Element的裝配162
8.2.1 RenderObjectToWidget-Element的裝配162
8.2.2 StatelessElement和StatefulElement的裝配164
8.2.3多子元素掛載166
8.3 State類全解析168
8.3.1 State的生命週期回調169
8.3.2 State切換和跳轉時生命週期測試173
8.3.3 setState做了什麼175

Day 9異步與資源178
9.1認識異步與流178
9.1.1 Dart中的異步任務178
9.1.2 Dart中的流181
9.2文件中的異步與流184
9.2.1文件的簡單操作184
9.2.2文件讀寫的異步操作186
9.2.3文件讀寫的流操作188
9.2.4使用文件打造圖標轉換工具190
9.3網絡請求與json解析193
9.3.1使用GitHub開放API測試網絡訪問193
9.3.2 json解析197
9.3.3異步方法的基本使用199

Day 10數據共享與狀態管理202
10.1數據共享和參數傳遞202
10.1.1數據共享的傳統實現方式202
10.1.2用InheritedWidget實現數據共享204
10.2狀態管理的原始處理過程207
10.2.1數據準備與界面說明207
10.2.2 FutureBuilder與StreamBuilder的使用209
10.3使用插件進行狀態管理213
10.3.1 BLoC對數據狀態的管理213
10.3.2 Provider對數據狀態的管理219
10.3.3 Redux對數據狀態的管理225

Day 11數據持久化和讀取230
11.1 Flutter中的數據庫存儲230
11.1.1數據庫的初始化231
11.1.2使用sqflite進行增刪改查234
11.1.3數據庫數據與UI界面的對接237
11.2表單與數據持久化240
11.2. 1表單註冊頁240
11.2.2持久化json數據和讀取241
11.2.3持久化XML數據和讀取243

Day 12插件及混合開發245
12.1 Flutter和平台間的通信方式246
12.1.1 Flutter/Dart端246
12.1.2 Android/Kotlin端247
12.1.3用toast連接兩個世界248
12.1.4 Flutter向平台傳參250
12.1.5插件的使用和上傳253
12.2 Flutter常見插件的使用255
12.2.1路徑插件和權限插件255
12.2.2音頻播放插件audioplayer 257
12.2.3視頻播放插件video_player 259
12.2.4圖片拾取器image_picker 261
12.2.5通過webview_flutter使用已有Web頁面262
12.3 Flutter的混合開發264
12.3.1 Flutter和Android混合開發264
12.3.2 Flutter和iOS混合開發269
12.3.3讓Android視圖加入Flutter 271