Flutter開發(fā)實例解析

前　言
第1章 Flutter基礎知識　/ 　1
1.1　移動跨端開發(fā)技術　/ 　2
　　1.1.1　移動端應用開發(fā)的一般流程　/ 　2
　　1.1.2　原生開發(fā)與跨端開發(fā)　/ 　4
　　1.1.3　移動跨端開發(fā)技術的發(fā)展歷程　/ 　6
　　1.1.4　跨端技術難點　/ 　7
1.2　Flutter技術　/ 　9
　　1.2.1　Flutter技術簡介　/ 　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進行Flutter開發(fā)　/ 　19
　　1.4.2　使用Visual Studio Code進行Flutter開發(fā)　/ 　21
　　1.4.3　使用在線環(huán)境進行Flutter開發(fā)　/ 　23
1.5　創(chuàng)建個Flutter應用Hello World　/ 　24
　　1.5.1　如何創(chuàng)建Flutter工程　/ 　24
　　1.5.2　配置Android 模擬器與真機運行　/ 　26
　　1.5.3　配置iOS模擬器與真機運行　/ 　28
第2章 Dart和Flutter核心概念——零基礎開發(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組件——應用架構(gòu)的基石　/ 　40
　　2.4.3　Scaffold 組件——頁面的骨架　/ 　41
2.5　開發(fā)番茄鐘　/ 　42
　　2.5.1　使用Center組件進行居中顯示　/ 　43
　　2.5.2　Text文本展示組件　/ 　44
　　2.5.3　添加Timer 定時器　/ 　45
　　2.5.4　為按鈕添加單擊事件控制番茄鐘開始　/ 　46
2.6　番茄鐘知識擴展　/ 　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包管理導入擴展包　/ 　90
　　4.1.2　Flutter Channel原生通信機制介紹　/ 　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 展示當前位置　/ 　117
　　4.5.4　通過PolylineLayerOptions 繪制行進軌跡　/ 　118
4.6　軌跡計步器知識拓展　/ 　119
第5章 Socket網(wǎng)絡通信——開發(fā)屬于自己的“微信”聊天工具　/ 　121
5.1　聊天工具開發(fā)要點　/ 　122
　　5.1.1　Dart Socket網(wǎng)絡通信框架　/ 　122
　　5.1.2　Flutter圖片資源管理　/ 　124
　　5.1.3　使用ListView展示長列表數(shù)據(jù)　/ 　125
　　5.1.4　通過Navigator 進行頁面跳轉(zhuǎn)　/ 　127
　　5.1.5　聊天工具開發(fā)流程　/ 　130
5.2　創(chuàng)建首頁設置頁面　/ 　131
　　5.2.1　搭建聊天工具Flutter工程　/ 　131
　　5.2.2　基于NetworkInterface展示本機IP地址　/ 　133
　　5.2.3　使用TextField實現(xiàn)Server設置項　/ 　135
　　5.2.4　使用TextField實現(xiàn)Client設置項　/ 　138
5.3　建立Socket通信　/ 　140
　　5.3.1　創(chuàng)建消息Model并進行JSON序列化　/ 　140
　　5