本书是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