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

Flutter作為一種新興的跨端開發技術，其語言和框架都是全新的，並且知識體繫比較龐大，學習起來有一定的難度。對於初學者來說，*迫切的願望就是能夠快速上手，將理論知識轉化為實際經驗，並在不斷的實踐中擴充完善知識體繫。本書旨在幫助Flutter初學者實現這一願望。
《Flutter開發實例解析》突出實戰的特點，通過精心選取的大量實例項目，手把手帶領讀者完成多個Flutter實際應用開發。按照循序漸進的順序對這些項目進行介紹，從*初的簡單番茄計時器、擬物時鐘，到後續的筆記應用、Todo應用、技術頭條應用，逐步帶領讀者開發出具備地圖、定位、網絡、數據庫、狀態管理等功能的復雜應用，*終使讀者能夠掌握Flutter的中高級開發能力。
《Flutter開發實例解析》適合不同層次的移動端開發工程師、前端開發工程師，以及希望快速入門Flutter 移動端開發的讀者閱讀學習。