本書是Flutter從基礎入門到進階實戰的教程書，也是一本面向大前端的新技術書。Flutter是谷歌新推出的一個跨平臺的、開源的UI框架，同時支持iOS系統和Android系統開發，并且是谷歌未來新操作系統Fuchsia的默認開發套件。本書共10章，內容包括Flutter簡介、Dart語言入門、一切皆組件、事件處理、動畫、使用網絡技術與異步編程、路由、持久化、插件與混合工程和項目實戰。本書不僅介紹了Flutter的基本原理、特性，而且在實戰章節全面展示了打造一個完整的基于Flutter的App的流程，包含具體細節、思想流程和代碼實操。

適讀人群：本書適合Flutter初學者，對移動開發（iOS/Android）有一定經驗的人員，以及希望了解Flutter原理并進階實戰的相關技術人員。

移動端資深架構師，專家講解，Flutter核心技術與前沿案例。

谷歌全平臺框架Flutter入門到進階實戰的教程，面向基礎學習、商業應用場景，從原理到實戰。

豐富的案例呈現，極具實操意義的項目案例剖析，即學即用的代碼結構、附贈源碼。

代碼全面適合新版本，疑點、難點解析，可直接學習上架App 。

一套代碼多端運用，大前端構建、移動開發、Dart語言學習的名鋒利器 。

Stack Overflow 2019年備受開發者追捧的框架之一。

前 言

開發者的思考

隨著移動開發技術的發展與成熟，移動端所處的萌芽階段也早已結束。現在，iOS與Android系統已經越來越成熟，各種App之間的系統差異性也越來越小，可以說，移動開發技術已經進入了下半場。其中，如何構建大前端的跨平臺方案，是近年來十分火熱的話題之一。

我在工作之余，喜歡瀏覽一些技術類網站，比如掘金、CSDN等。在這些技術網站上，我了解和學習了不少新技術，也在實踐這幾年出現的跨平臺技術，比如Hybrid、React Native、Weex等。

在2018年年初，我第一次了解到谷歌的Flutter技術，經過一番實踐之后，我認為這是一種很有前景的新技術，它可以快速在iOS和Android系統上構建高質量的原生用戶界面。很明顯，Flutter為大前端的跨平臺方案提供了一個全新的思路。為此，我專門做了一些開源項目并發表了一些文章，以便更深入地學習、推廣Flutter技術。非常榮幸，在這個過程中，電子工業出版社的陳林老師找到了我，并希望我寫一本關于Flutter的技術書，這著實讓我受寵若驚，也倍感責任重大。

由于Flutter是一門新技術，大家都處于學習的狀態中。為了便于大家理解，也便于自己的技術積累，我在學習過程中不斷總結，做筆記，逐漸整理和創作了《Flutter：從0到1構建大前端應用》一書。

讀者對象

本書是一本關于Flutter入門的書，從基礎講起，也會涉及與Dart語言相關的內容，以便于讀者快速邁向Flutter開發。同時，本書也會涉及技術原理、思維等拔高內容。

本書通俗易懂，由淺入深，既適合初學者學習，也適合專業人員閱讀。對于在Android、iOS、前端等領域有過相關工作經驗的讀者來說，閱讀體驗會更好。

本書內容

本書內容是非常系統化的，用10個章節講述了學習Flutter必須掌握的知識，內容涉及Flutter簡介、環境搭建、Dart語言簡介、組件、事件處理、動畫、網絡、路由、持久化、插件和實戰項目等。實踐項目會教你如何構建一個Flutter應用，其中會使用Node.js把服務端搭建起來。此外，還會專門寫一個Flutter異常上報的項目，用于錯誤日志的跟蹤。

本書各個章節內容比較獨立，你可以按照順序閱讀，進行從0到1的全面學習；也可以根據需要把本書作為一本工具查詢書，直接跳轉到需要查詢的章節。每章的內容摘要如下所示。

第1章，Flutter簡介：從整體上先介紹移動端近年的發展變化，然后引出Flutter，并介紹Flutter的環境搭建。

第2章，Dart語言入門：介紹要編寫Flutter項目所必須掌握的Dart語言核心語法知識，為學好Flutter做鋪墊。

第3章，一切皆組件：介紹Flutter相關的核心組件和使用場景等。

第4章，事件處理：介紹Flutter的事件處理機制等。

第5章，動畫：介紹Flutter的動畫相關內容與核心原理等。

第6章，使用網絡技術與異步編程：介紹Flutter網絡技術的相關內容、網絡層與服務端的交互，以及Flutter的異步編程等。

第7章，路由：介紹Flutter的路由跳轉方式和原理等。

第8章，持久化：介紹Flutter的幾種持久化存儲方式。

第9章，插件與混合工程：介紹Flutter的插件編寫方式以及如何在現有原生項目里加入Flutter的相關技術。

第10章，項目實戰：第一個項目從服務端與客戶端的角度，介紹一個完整的項目案例；第二個項目介紹Flutter的日志捕獲方式以及服務端采集日志的方式。

何瑞君，移動端資深架構師，擅長Android、HTML5、React Native、Flutter等技術開發。GitHub重度使用者，熱愛開源項目和技術文章寫作。目前就職于平安銀行。

目 錄

第1章 Flutter簡介1
1.1 Flutter的優勢1
1.2 對比其他技術2
1.3 Flutter架構3
1.3.1 Flutter Framework3
1.3.2 Flutter Engine4
1.4 開發環境搭建4
1.4.1 Mac上的環境搭建4
1.4.2 在Mac上獲取SDK并設置環境變量5
1.4.3 安裝Xcode與運行模擬器6
1.4.4 安裝Android Studio7
1.4.5 在Android Studio上安裝Flutter開發插件8
1.4.6 安裝VSCode與Flutter開發插件9
1.4.7 IDE的選擇11
1.4.8 使用Flutter診斷工具檢查Flutter開發環境11
1.4.9 創建Demo工程并體驗熱重載12
1.5 Flutter升級14
本章小結15

第2章 Dart語言入門16
2.1 應用場景16
2.1.1 SDK安裝和升級17
2.1.2 編寫一個HelloWorld并運行17
2.2 變量與常量18
2.2.1 變量18
2.2.2 常量18
2.2.3 內置類型19
2.2.4 數值型19
2.2.5 數值型操作20
2.2.6 字符串21
2.2.7 字符串操作21
2.2.8 布爾型23
2.2.9 List與數組23
2.2.10 Map24
2.2.11 dynamic和Object25
2.3 算符26
2.4 異常捕獲27
2.5 函數Function28
2.5.1 main函數28
2.5.2 可選參數28
2.5.3 必傳參數29
2.5.4 可選的位置參數29
2.5.5 默認參數29
2.5.6 函數作為參數傳遞30
2.5.7 函數作為變量30
2.6 異步編程30
2.6.1 Future是什么31
2.6.2 async和await31
2.6.3 繼承、接口實現和混合33
2.6.4 泛型37
本章小結39

第3章 一切皆組件40
3.1 基礎組件（Basic widgets）42
3.1.1 Text43
3.1.2 Icon43
3.1.3 Image45
3.1.4 Button45
3.1.5 FlutterLogo47
3.2 單一子元素組件（Single-child）48
3.2.1 Container48
3.2.2 Container的約束49
3.2.3 SingleChildScrollView52
3.2.4 FittedBox53
3.2.5 FractionallySizedBox54
3.2.6 ConstrainedBox55
3.2.7 Baseline56
3.2.8 IntrinsicWidth和IntrinsicHeight58
3.3 多子元素組件（Multi-child）58
3.3.1 Scaffold58
3.3.2 AppBar59
3.3.3 Row和Column61
3.3.4 ListView64
3.3.5 GridView69
3.3.6 CustomScrollView70
3.3.7 Flex73
3.3.8 Wrap75
3.4 狀態管理77
3.4.1 Widget樹78
3.4.2 Context79
3.4.3 StatelessWidget80
3.4.4 StatefulWidget80
3.4.5 StatefulWidget的組成81
3.4.6 State82
3.4.7 State生命周期82
3.4.8 Widget的唯一身份標識：key88
3.4.9 InheritedWidget89
3.5 包管理93
3.6 常用代碼段效果94
3.6.1 案例一：側滑效果95
3.6.2 案例二：登錄界面96
3.6.3 案例三：輪播圖效果96
3.6.4 案例四：圖片瀏覽器的相冊效果97
3.6.5 案例五：全局主題設置97
本章小結98

第4章 事件處理99
4.1 原始指針事件99
4.1.1 基本用法99
4.1.2 忽略事件102
4.2 GestureDetector105
4.2.1 基本用法105
4.2.2 常用事件106
4.2.3 拖曳和縮放效果109
4.2.4 事件競爭與手勢沖突112
4.2.5 手勢識別器114
4.3 事件原理與分發機制117
4.4 事件通知122
本章小結125

第5章 動畫126
5.1 動畫原理及概述126
5.1.1 Animation127
5.1.2 Animatable127
5.1.3 AnimationController128
5.1.4 Tween130
5.1.5 Tween.animate133
5.1.6 Curve133
5.2 動畫的封裝與簡化136
5.2.1 AnimatedWidget136
5.2.2 AnimatedBuilder137
5.3 Hero動畫141
5.3.1 基本用法141
5.3.2 實現原理143
5.4 交錯動畫145
5.5 動畫示例151
5.5.1 自定義加載動畫151
5.5.2 實現動畫效果153
5.5.3 Dialog加載框157
5.5.4 測試加載框效果159
本章小結161

第6章 使用網絡技術與異步編程162
6.1 網絡協議簡介162
6.1.1 HTTP協議簡介163
6.1.2 HTTP 2.0能給我們帶來什么164
6.1.3 HTTPS166
6.2 網絡編程167
6.2.1 HttpClient167
6.2.2 http庫170
6.3 JSON解析171
6.3.1 JSON轉成Dart對象172
6.3.2 一個完整的例子173
6.3.3 根據JSON用工具生成實體類175
6.4 dio庫176
6.4.1 基本用法177
6.4.2 dio單例177
6.4.3 dio攔截器178
6.4.4 dio攔截器鏈180
6.4.5 dio適配器181
6.4.6 dio庫總結183
6.5 異步編程184
6.5.1 isolate184
6.5.2 event loop184
6.5.3 線程模型與isolate188
6.5.4 創建單獨的isolate190
6.5.5 Stream事件流192
本章小結195

第7章 路由196
7.1 路由簡介196
7.1.1 基本用法197
7.1.2 靜態路由197
7.1.3 動態路由200
7.1.4 參數回傳203
7.2 路由棧206
7.2.1 路由棧詳解207
7.2.2 pushReplacementNamed方法207
7.2.3 popAndPushNamed方法208
7.2.4 pushNamedAndRemoveUntil方法209
7.2.5 popUntil方法210
7.3 自定義路由210
本章小結214

第8章 持久化215
8.1 shared_preferences本地存儲215
8.1.1 shared_preferences的常用操作216
8.1.2 shared_preferences舉例216
8.2 SQLite數據庫219
8.2.1 sqflite依賴庫簡介220
8.2.2 封裝SQL Helpers223
8.2.3 sqflite實現員工打卡示例225
8.3 文件形式存儲232
8.3.1 path_provider簡介233
8.3.2 一個簡單的日記本示例233
本章小結236

第9章 插件與混合工程237
9.1 package237
9.1.1 添加package的幾種方式238
9.1.2 更新package239
9.1.3 創建自己的package240
9.1.4 發布package240
9.2 理解Platform Channel241
9.2.1 消息傳遞與編解碼器242
9.2.2 Platform數據類型支持243
9.2.3 MethodChannel簡介243
9.2.4 SharedPreferences插件源碼解析245
9.3 混合開發247
9.3.1 創建Flutter模塊248
9.3.2 關聯原生工程248
9.3.3 編寫混合工程代碼249
9.3.4 熱重載混合端代碼251
9.3.5 aar模塊化打包252
9.4 FlutterBoost混合方案253
9.4.1 框架的由來253
9.4.2 使用FlutterBoost改進254
9.4.3 FlutterBoost源碼分析255
本章小結263

第10章 項目實戰264
10.1 實戰一：實現一個招聘類App264
10.1.1 項目需求與技術選型264
10.1.2 服務端設計265
10.1.3 Flutter基礎架構270
10.1.4 啟動頁面271
10.1.5 使用dio實現網絡請求273
10.1.6 公司列表與詳情實現275
10.1.7 用WebSocket實現聊天模塊281
10.2 實戰二：實現異常上報系統286
10.2.1 實現原理286
10.2.2 FlutterError.onError和Zone287
10.2.3 異常上報Flutter的實現288
10.2.4 異常上報Android端的實現290
10.2.5 服務端接收異常上報293
10.3 實戰項目源碼299
10.4 性能分析與輔助工具300
本章小結304