Flutter之旅

Day 1　初識(shí)Flutter與技能儲(chǔ)備 1
1.1　Flutter初始項(xiàng)目分析 1
1.1.1　Flutter初始項(xiàng)目結(jié)構(gòu) 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　斷點(diǎn)和放行 7
1.2.2　變量查詢和喚醒程序 8
1.2.3　Debug要點(diǎn)補(bǔ)充 9
1.3　輔助技能儲(chǔ)備 10
1.3.1　三個(gè)實(shí)用工具 10
1.3.2　片段代碼和快速重構(gòu) 12
1.3.3　三個(gè)基礎(chǔ)知識(shí)QA 14
1.4　Widget知識(shí)儲(chǔ)備 15
1.4.1　命令式UI編程與聲明式UI編程 16
1.4.2　認(rèn)識(shí)Widget體系 16
1.4.3　Widget源碼初識(shí) 18
1.4.4　組件的提取抽離 21

Day 2　Dart實(shí)用語(yǔ)法速覽 23
2.1　基礎(chǔ)語(yǔ)法 23
2.1.1　常用的數(shù)據(jù)類型 23
2.1.2　變量與常量 26
2.1.3　函數(shù)的使用 27
2.2　通過(guò)Size類看Dart中的面向?qū)ο?30
2.3　其他語(yǔ)法點(diǎn) 34
2.3.1　常用符號(hào)與關(guān)鍵字 34
2.3.2　庫(kù)的使用和可見(jiàn)性 35
2.3.3　泛型 36
2.3.4　異步 37
2.3.5　異常處理 38

Day 3　界面風(fēng)格和簡(jiǎn)單繪制 39
3.1　Material風(fēng)格 40
3.1.1　Scaffold和BottomNavigationBar 40
3.1.2 TabBar和TabBarView 41
3.1.3 標(biāo)題欄按鈕和菜單組件 42
3.1.4 彈出對(duì)話框 43
3.1.5 界面的左右滑頁(yè) 43
3.1.6 showSnackBar和showBottomSheet 44
3.2 Cupertino風(fēng)格 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　認(rèn)識(shí)CustomPainter繪制 49
3.3.1　繪制網(wǎng)格 49
3.3.2 Canvas初級(jí)繪制 50
3.3.3 移植繪制n角星 52
3.3.4 移植繪制粒子數(shù)字 54

Day 4　基礎(chǔ)Widget 56
4.1 Text組件 56
4.1.1 Text的基本使用 56
4.1.2 Text的陰影和裝飾線 57
4.1.3 文字方向、對(duì)齊和溢出處理 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 圖片的適應(yīng)模式 62
4.2.3 圖片顏色及混合模式 63
4.2.4 圖片對(duì)齊模式及重復(fù)模式 63
4.2.5 用centerSlice實(shí)現(xiàn)圖片局部放大 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　列表與滑動(dòng) 79
5.1　組件封裝 79
5.1.1　靜態(tài)布局 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的構(gòu)造及分隔線 85
5.2.3　ListView的不同樣式 87
5.2.4　ListView的上拉與下拉 87
5.3　常用滑動(dòng)組件 90
5.3.1　單子滑動(dòng)組件SingleChildScrollView 90
5.3.2　滑動(dòng)控制器ScrollController 92
5.3.3　滑頁(yè)組件PageView 94
5.3.4　網(wǎng)格組件GridView 97
5.4　Sliver家族 99
5.4.1　SliverAppBar的使用 100
5.4.2　Sliver中的列表布局、網(wǎng)格布局及普通布局 101
5.4.3　吸頂效果SliverPersistentHeader 103

Day 6　動(dòng)畫(huà)與路由 106
6.1　動(dòng)畫(huà)閑談 106
6.1.1　FPS 106
6.1.2　動(dòng)畫(huà)控制器AnimationController 107
6.1.3　運(yùn)動(dòng)盒 108
6.2　Flutter動(dòng)畫(huà)詳解 111
6.2.1　Animation和Animatable 111
6.2.2　動(dòng)畫(huà)狀態(tài)監(jiān)聽(tīng)和Animation方法 116
6.2.3　動(dòng)畫(huà)簡(jiǎn)化和封裝 117
6.2.4　封裝強(qiáng)化版FlutterContainer 118
6.3　路由與導(dǎo)航 122
6.3.1　打開(kāi)路由 122
6.3.2　路由的傳參 125
6.3.3　路由的跳轉(zhuǎn)動(dòng)畫(huà) 128
6.3.4　Hero跳轉(zhuǎn)動(dòng)畫(huà) 130

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

Day 8　Flutter渲染機(jī)制 153
8.1　認(rèn)識(shí)三棵樹(shù) 153
8.1.1　漫談Widget、Element、RenderObject
8.1.2　認(rèn)識(shí)RenderObject和Element
8.1.3　三棵樹(shù)結(jié)構(gòu)
8.1.4　三個(gè)根結(jié)點(diǎn)的初始化
8.2　Element的裝配 162
8.2.1　RenderObjectToWidget-Element的裝配
8.2.2　StatelessElement和StatefulElement的裝配
8.2.3　多子元素掛載
8.3　State類全解析 168
8.3.1　State的生命周期回調(diào)
8.3.2　State切換和跳轉(zhuǎn)時(shí)生命周期測(cè)試
8.3.3　setState做了什么

Day 9　異步與資源 178
9.1　認(rèn)識(shí)異步與流 178
9.1.1　Dart中的異步任務(wù)
9.1.2　Dart中的流
9.2　文件中的異步與流 184
9.2.1　文件的簡(jiǎn)單操作
9.2.2　文件讀寫(xiě)的異步操作
9.2.3　文件讀寫(xiě)的流操作
9.2.4　使用文件打造圖標(biāo)轉(zhuǎn)換工具
9.3　網(wǎng)絡(luò)請(qǐng)求與json解析 193
9.3.1　使用GitHub開(kāi)放API 測(cè)試網(wǎng)絡(luò)訪問(wèn)
9.3.2　json解析
9.3.3　異步方法的基本使用

Day 10　數(shù)據(jù)共享與狀態(tài)管理 202
10.1　數(shù)據(jù)共享和參數(shù)傳遞 202
10.1.1　數(shù)據(jù)共享的傳統(tǒng)實(shí)現(xiàn)方式
10.1.2　用InheritedWidget實(shí)現(xiàn)數(shù)據(jù)共享
10.2　狀態(tài)管理的原始處理過(guò)程 207
10.2.1　數(shù)據(jù)準(zhǔn)備與界面說(shuō)明
10.2.2　FutureBuilder與StreamBuilder的使用
10.3　使用插件進(jìn)行狀態(tài)管理 213
10.3.1　BLoC對(duì)數(shù)據(jù)狀態(tài)的管理
10.3.2　Provider對(duì)數(shù)據(jù)狀態(tài)的管理
10.3.3　Redux對(duì)數(shù)據(jù)狀態(tài)的管理

Day 11　數(shù)據(jù)持久化和讀取 230
11.1　Flutter中的數(shù)據(jù)庫(kù)存儲(chǔ)
11.1.1　數(shù)據(jù)庫(kù)的初始化
11.1.2　使用sqflite進(jìn)行增刪改查
11.1.3　數(shù)據(jù)庫(kù)數(shù)據(jù)與UI界面的對(duì)接
11.2　表單與數(shù)據(jù)持久化 240
11.2.1　表單注冊(cè)頁(yè)
11.2.2　持久化json數(shù)據(jù)和讀取
11.2.3　持久化XML數(shù)據(jù)和讀取

Day 12　插件及混合開(kāi)發(fā) 245
12.1　Flutter和平臺(tái)間的通信方式 246
12.1.1　Flutter/Dart端
12.1.2　Android/Kotlin端
12.1.3　用toast連接兩個(gè)世界
12.1.4　Flutter向平臺(tái)傳參
12.1.5　插件的使用和上傳
12.2　Flutter常見(jiàn)插件的使用 255
12.2.1　路徑插件和權(quán)限插件
12.2.2　音頻播放插件audioplayer
12.2.3　視頻播放插件video_player
12.2.4　圖片拾取器image_picker
12.2.5　通過(guò)webview_flutter使用已有Web頁(yè)面
12.3　Flutter的混合開(kāi)發(fā) 264
12.3.1　Flutter和Android混合開(kāi)發(fā)
12.3.2　Flutter和iOS混合開(kāi)發(fā)
12.3.3　讓Android視圖加入Flutter