Flutter作為一種新興的跨端開(kāi)發(fā)技術(shù)，其語(yǔ)言和框架都是全新的，并且知識(shí)體系比較龐大，學(xué)習(xí)起來(lái)有一定的難度。對(duì)于初學(xué)者來(lái)說(shuō)，*迫切的愿望就是能夠快速上手，將理論知識(shí)轉(zhuǎn)化為實(shí)際經(jīng)驗(yàn)，并在不斷的實(shí)踐中擴(kuò)充完善知識(shí)體系。本書(shū)旨在幫助Flutter初學(xué)者實(shí)現(xiàn)這一愿望。
《Flutter開(kāi)發(fā)實(shí)例解析》突出實(shí)戰(zhàn)的特點(diǎn)，通過(guò)精心選取的大量實(shí)例項(xiàng)目，手把手帶領(lǐng)讀者完成多個(gè)Flutter實(shí)際應(yīng)用開(kāi)發(fā)。按照循序漸進(jìn)的順序?qū)�這些項(xiàng)目進(jìn)行介紹，從*初的簡(jiǎn)單番茄計(jì)時(shí)器、擬物時(shí)鐘，到后續(xù)的筆記應(yīng)用、Todo應(yīng)用、技術(shù)頭條應(yīng)用，逐步帶領(lǐng)讀者開(kāi)發(fā)出具備地圖、定位、網(wǎng)絡(luò)、數(shù)據(jù)庫(kù)、狀態(tài)管理等功能的復(fù)雜應(yīng)用，*終使讀者能夠掌握Flutter的中高級(jí)開(kāi)發(fā)能力。
《Flutter開(kāi)發(fā)實(shí)例解析》適合不同層次的移動(dòng)端開(kāi)發(fā)工程師、前端開(kāi)發(fā)工程師，以及希望快速入門Flutter 移動(dòng)端開(kāi)發(fā)的讀者閱讀學(xué)習(xí)。

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