Flutter作為一種新興的跨端開發(fā)技術(shù)，其語言和框架都是全新的，并且知識體系比較龐大，學(xué)習(xí)起來有一定的難度。對于初學(xué)者來說，*迫切的愿望就是能夠快速上手，將理論知識轉(zhuǎn)化為實際經(jīng)驗，并在不斷的實踐中擴(kuò)充完善知識體系。本書旨在幫助Flutter初學(xué)者實現(xiàn)這一愿望。
《Flutter開發(fā)實例解析》突出實戰(zhàn)的特點，通過精心選取的大量實例項目，手把手帶領(lǐng)讀者完成多個Flutter實際應(yīng)用開發(fā)。按照循序漸進(jìn)的順序?qū)@些項目進(jìn)行介紹，從*初的簡單番茄計時器、擬物時鐘，到后續(xù)的筆記應(yīng)用、Todo應(yīng)用、技術(shù)頭條應(yīng)用，逐步帶領(lǐng)讀者開發(fā)出具備地圖、定位、網(wǎng)絡(luò)、數(shù)據(jù)庫、狀態(tài)管理等功能的復(fù)雜應(yīng)用，*終使讀者能夠掌握Flutter的中高級開發(fā)能力。
《Flutter開發(fā)實例解析》適合不同層次的移動端開發(fā)工程師、前端開發(fā)工程師，以及希望快速入門Flutter 移動端開發(fā)的讀者閱讀學(xué)習(xí)。
前 言
第1章 Flutter基礎(chǔ)知識 / 1
1.1 移動跨端開發(fā)技術(shù) / 2
1.1.1 移動端應(yīng)用開發(fā)的一般流程 / 2
1.1.2 原生開發(fā)與跨端開發(fā) / 4
1.1.3 移動跨端開發(fā)技術(shù)的發(fā)展歷程 / 6
1.1.4 跨端技術(shù)難點 / 7
1.2 Flutter技術(shù) / 9
1.2.1 Flutter技術(shù)簡介 / 9
1.2.2 Flutter整體架構(gòu) / 12
1.2.3 Flutter與同類方案對比 / 14
1.3 如何安裝Flutter SDK / 15
1.4 配置Flutter開發(fā)環(huán)境 / 19
1.4.1 使用Android Studio進(jìn)行Flutter開發(fā) / 19
1.4.2 使用Visual Studio Code進(jìn)行Flutter開發(fā) / 21
1.4.3 使用在線環(huán)境進(jìn)行Flutter開發(fā) / 23
1.5 創(chuàng)建第一個Flutter應(yīng)用Hello World / 24
1.5.1 如何創(chuàng)建Flutter工程 / 24
1.5.2 配置Android 模擬器與真機(jī)運行 / 26
1.5.3 配置iOS模擬器與真機(jī)運行 / 28
第2章 Dart和Flutter核心概念——零基礎(chǔ)開發(fā)番茄鐘計時器 / 30
2.1 番茄鐘計時器開發(fā)要點 / 31
2.2 Dart語言快速上手 / 31
2.3 什么是Flutter組件化 / 32
2.3.1 什么是組件化思想 / 33
2.3.2 無狀態(tài)組件StatelessWidget / 33
2.3.3 有狀態(tài)組件StatefulWidget / 35
2.3.4 組件的生命周期 / 35
2.3.5 Material和Cupertino組件庫 / 38
2.4 初識Flutter工程 / 39
2.4.1 Flutter工程結(jié)構(gòu)特點 / 39
2.4.2 App組件——應(yīng)用架構(gòu)的基石 / 40
2.4.3 Scaffold 組件——頁面的骨架 / 41
2.5 開發(fā)番茄鐘 / 42
2.5.1 使用Center組件進(jìn)行居中顯示 / 43
2.5.2 Text文本展示組件 / 44
2.5.3 添加Timer 定時器 / 45
2.5.4 為按鈕添加單擊事件控制番茄鐘開始 / 46
2.6 番茄鐘知識擴(kuò)展 / 48
第3章 自定義視圖和動畫——開發(fā)精美的擬物時鐘 / 50
3.1 擬物時鐘開發(fā)要點 / 51
3.1.1 使用Container 定制組件展示效果 / 51
3.1.2 使用CustomPaint 創(chuàng)建Flutter自定義視圖 / 57
3.1.3 Flutter動畫入門與擬物時鐘的開發(fā)流程 / 59
3.2 基于Canvas和CustomPaint 繪制表盤 / 68
3.2.1 使用Container 繪制外表盤 / 68
3.2.2 使用Container 繪制內(nèi)表盤 / 70
3.2.3 使用CustomPaint 繪制表盤刻度 / 72
3.3 基于CustomPaint 繪制指針 / 74
3.3.1 使用CustomPaint 繪制時針與分針 / 74
3.3.2 使用rotate Transform偏轉(zhuǎn)指針 / 77
3.3.3 使用CustomPaint 繪制秒針 / 79
3.3.4 使用CustomPaint 繪制中心裝飾物 / 80
3.4 讓時針動起來 / 82
3.4.1 使用DataTime獲取時間信息 / 82
3.4.2 通過Timer定時器實現(xiàn)時間自動刷新 / 84
3.4.3 通過RotationTransition實現(xiàn)指針轉(zhuǎn)動動畫 / 84
3.5 擬物時鐘知識拓展 / 86
第4章 地圖＋傳感器——開發(fā)軌跡計步器 / 88
4.1 軌跡計步器開發(fā)要點 / 89
4.1.1 通過Flutter包管理導(dǎo)入擴(kuò)展包 / 90
4.1.2 Flutter Channel原生通信機(jī)制介紹 / 92
4.1.3 Column、Row橫縱向布局組件介紹 / 97
4.1.4 軌跡計步器開發(fā)流程 / 101
4.2 創(chuàng)建軌跡計步器首頁 / 101
4.2.1 創(chuàng)建軌跡計步器項目結(jié)構(gòu) / 101
4.2.2 創(chuàng)建儀表面板組件 / 102
4.3 基于Pedometer庫實現(xiàn)計步功能 / 108
4.3.1 Pedometer計步器庫介紹 / 108
4.3.2 通過Flutter Stream監(jiān)聽步數(shù) / 109
4.3.3 實現(xiàn)軌跡計步器的計步功能 / 110
4.4 基于geolocator庫實現(xiàn)定位功能 / 111
4.4.1 geolocator定位庫介紹 / 112
4.4.2 實現(xiàn)軌跡計步器的定位功能 / 112
4.4.3 保存軌跡計步器的定位軌跡歷史 / 114
4.5 基于flutter_map庫實現(xiàn)地圖功能 / 115
4.5.1 flutter_map地圖庫介紹 / 115
4.5.2 使用FlutterMap組件創(chuàng)建地圖 / 115
4.5.3 通過MarkerLayerOptions 展示當(dāng)前位置 / 117
4.5.4 通過PolylineLayerOptions 繪制行進(jìn)軌跡 / 118
4.6 軌跡計步器知識拓展 / 119
第5章 Socket網(wǎng)絡(luò)通信——開發(fā)屬于自己的“微信”聊天工具 / 121
5.1 聊天工具開發(fā)要點 / 122
5.1.1 Dart Socket網(wǎng)絡(luò)通信框架 / 122
5.1.2 Flutter圖片資源管理 / 124
5.1.3 使用ListView展示長列表數(shù)據(jù) / 125
5.1.4 通過Navigator 進(jìn)行頁面跳轉(zhuǎn) / 127
5.1.5 聊天工具開發(fā)流程 / 130
5.2 創(chuàng)建首頁設(shè)置頁面 / 131
5.2.1 搭建聊天工具Flutter工程 / 131
5.2.2 基于NetworkInterface展示本機(jī)IP地址 / 133
5.2.3 使用TextField實現(xiàn)Server設(shè)置項 / 135
5.2.4 使用TextField實現(xiàn)Client設(shè)置項 / 138
5.3 建立Socket通信 / 140
5.3.1 創(chuàng)建消息Model并進(jìn)行JSON序列化 / 140
5.3.2 創(chuàng)建Socket通信基類BaseSocketCS / 143
5.3.3 基于ServerSocket創(chuàng)建Socket服務(wù)器 / 143
5.3.4 基于Socket創(chuàng)建Socket客戶端 / 145
5.3.5 在_MyAppState中接入Socket框架 / 146
5.3.6 雙端Socket通信聯(lián)調(diào) / 152
5.4 建立聊天頁面 / 154
5.4.1 基于ListView 實現(xiàn)消息列表 / 155
5.4.2 基于Container 實現(xiàn)消息組件 / 156
5.4.3 基于Navigator 實現(xiàn)頁面跳轉(zhuǎn) / 158
5.4.4 使用TextField 實現(xiàn)消息輸入組件 / 159
5.5 使用Image 組件擴(kuò)展表情包功能 / 161
5.6 聊天工具知識拓展 / 165
第6章 數(shù)據(jù)持久化——開發(fā)一款支持Markdown的“印象筆記” / 166
6.1 Markdown 筆記開發(fā)要點 / 167
6.1.1 Flutter下的Markdown展示方式 / 167
6.1.2 基于flutter_markdown實現(xiàn)Markdown 原生渲染 / 168
6.1.3 使用shared_preferences存儲筆記數(shù)據(jù) / 170
6.1.4 使用InheritedWidget進(jìn)行狀態(tài)管理 / 171
6.1.5 筆記應(yīng)用開發(fā)流程 / 174
6.2 基于InheritedWidget 開發(fā)狀態(tài)層 / 175
6.2.1 創(chuàng)建筆記Model / 176
6.2.2 基于基于StatefulWidget創(chuàng)建NoteStore / 177
6.2.3 在_NoteStoreState 中實現(xiàn)筆記增刪改查 / 178
6.2.4 基于InheritedWidget實現(xiàn)_NoteStoreScope / 181
6.2.5 在NoteStore中完善狀態(tài)訪問接口 / 182
6.3 創(chuàng)建筆記應(yīng)用首頁 / 183
6.3.1 使用didChangeDependencies進(jìn)行狀態(tài)關(guān)聯(lián) / 183
6.3.2 基于Scaffold實現(xiàn)首頁抽屜導(dǎo)航布局 / 184
6.4 創(chuàng)建筆記編輯頁 / 186
6.4.1 實現(xiàn)_PageEditorState搭建主要布局 / 187
6.4.2 實現(xiàn)getAppBar編輯頁工具欄 / 188
6.4.3 運行編輯頁調(diào)試功能 / 190
6.4.4 使用TextField 實現(xiàn)元信息編輯頁 / 191
6.5 創(chuàng)建筆記預(yù)覽頁 / 194
6.6 創(chuàng)建編輯頁工具欄 / 195
6.7 Markdown 筆記應(yīng)用知識擴(kuò)展 / 198
第7章 SQLite數(shù)據(jù)庫——開發(fā)一款“奇妙清單”Todo 應(yīng)用 / 200
7.1 Todo 應(yīng)用開發(fā)要點 / 201
7.1.1 使用sqflite 進(jìn)行SQLite 數(shù)據(jù)庫開發(fā) / 201
7.1.2 使用Provider進(jìn)行Flutter復(fù)雜狀態(tài)管理 / 204
7.1.3 Todo 應(yīng)用的業(yè)務(wù)流程 / 208
7.2 基于sqflite 實現(xiàn)SQLite 數(shù)據(jù)層 / 210
7.2.1 封裝項目Model / 210
7.2.2 封裝待辦事項Model / 211
7.2.3 sqflite 數(shù)據(jù)庫初始化 / 213
7.2.4 實現(xiàn)項目數(shù)據(jù)庫操作類ProjectManager / 214
7.2.5 實現(xiàn)待辦事項操作類TodoManager / 215
7.3 基于Provider實現(xiàn)狀態(tài)層 / 216
7.3.1 實現(xiàn)待辦事項狀態(tài)類TodoState / 216
7.3.2 實現(xiàn)項目狀態(tài)類ProjectState / 217
7.3.3 使用MultiProvider對外提供狀態(tài) / 219
7.4 創(chuàng)建Todo 應(yīng)用首頁 / 219
7.4.1 使用Consumer 實現(xiàn)項目列表 / 220
7.4.2 創(chuàng)建待辦事項列表項組件 / 222
7.4.3 使用Consumer2 實現(xiàn)待辦事項列表 / 225
7.5 創(chuàng)建Todo 應(yīng)用項目編輯頁 / 227
7.5.1 實現(xiàn)項目編輯頁整體Scaffold 布局 / 227
7.5.2 使用showDatePicker編輯創(chuàng)建和截止時間 / 229
7.5.3 訪問ProjectState 實現(xiàn)項目數(shù)據(jù)保存 / 231
7.6 創(chuàng)建Todo 應(yīng)用待辦事項編輯頁 / 232
7.6.1 實現(xiàn)待辦事項編輯頁整體Scaffold 布局 / 232
7.6.2 通過自定義對話框?qū)崿F(xiàn)項目選擇 / 235
7.6.3 訪問TodoState 實現(xiàn)待辦事項數(shù)據(jù)保存 / 236
7.7 Todo 應(yīng)用知識擴(kuò)展 / 238
第8章 Http+WebView——開發(fā)“技術(shù)頭條”讓技術(shù)先人一步 / 239
8.1 技術(shù)頭條開發(fā)要點 / 240
8.1.1 Flutter http網(wǎng)絡(luò)庫介紹 / 240
8.1.2 GitHub API介紹 / 241
8.1.3 使用json_annotation實現(xiàn)高效序列化 / 242
8.1.4 Flutter集成WebView實現(xiàn)網(wǎng)頁瀏覽 / 244
8.1.5 技術(shù)頭條的業(yè)務(wù)流程 / 245
8.2 基于http 庫實現(xiàn)網(wǎng)絡(luò)層 / 246
8.2.1 基于json_annotation創(chuàng)建Model 類 / 247
8.2.2 基于http 庫實現(xiàn)GitHub 網(wǎng)絡(luò)訪問類 / 252
8.2.3 基于Service 模式搭建網(wǎng)絡(luò)層 / 254
8.3 創(chuàng)建首頁活動Feed 流 / 257
8.3.1 基于CustomScrollView搭建首頁Feed 流布局 / 257
8.3.2 通過SliverPersistentHeader實現(xiàn)吸頂搜索組件 / 258
8.3.3 通過SliverGrid實現(xiàn)九宮格導(dǎo)航 / 261
8.3.4 通過SliverList實現(xiàn)Feed 流內(nèi)容展示 / 264
8.3.5 接收ScrollNotification事件實現(xiàn)加載更多內(nèi)容 / 268
8.4 創(chuàng)建GitHub 公共活動Feed 流 / 270
8.4.1 基于ListView公共活動Feed 流布局 / 270
8.4.2 通過listPublicEvents和ScrollNotification 加載數(shù)據(jù) / 272
8.5 通過xpath 爬蟲實現(xiàn)GitHub Trending 頁 / 273
8.5.1 通過xpath 解析GitHub Trending 網(wǎng)頁 / 274
8.5.2 通過ListView對GitHub Trending 進(jìn)行展示 / 276
8.5.3 在createGrid中完成路由跳轉(zhuǎn)邏輯 / 277
8.6 基于webview_flutter實現(xiàn)WebView頁面 / 278
8.7 技術(shù)頭條應(yīng)用知識擴(kuò)展 / 279
書單推薦
