Flutter开发实战详解

《Flutter 开发实战详解》以实战为导向，由浅入深地介绍了Flutter开发过程中的基础体系、实战技巧和源码分析。通过本书，读者可以快速掌握Flutter的开发技能，并通过实战学习Flutter的源码设计。同时，本书还配套全面的学习例程与完整的开源项目，真正做到为读者的Flutter学习旅程披荆斩棘。

本书适合有一定开发经验的学生、研究者或从业者，尤其是 Android、iOS或前端开发人员阅读。

作者拥有5年以上的移动端开发经验，长期负责移动端的技术架构与业务实现，在跨平台领域从 React Native到Flutter拥有丰富的线上项目开发经历。

目前作者在GitHub的开源项目收获30k+的star，其中的Flutter实战项目gsy_github_app_flutter、Flutter学习演示项目gsy_flutter_demo和Flutter电子书项目gsy_flutter_book已收获了超过14000的star，其中gsy_github_app_flutter项目star数已经破万。

作者长期活跃于掘金（恋猫de小郭）、知乎（恋猫）等技术平台，并维护有GSYTech公众号，持续产出着各类移动领域相关的技术文章，欢迎交流互动。

本书通过实战案例，详解了Flutter是如何做到“开发高效”“运行高效”“UI高一致性”的。

本书不仅深入剖析了Flutter框架设计的要点，更全面展示了Flutter的设计思想。

为便于读者学习，本书提供了完整的学习例程与开源项目。

序

在看到本书之前，我接触Flutter开发的时间也不短了，Flutter的出现确实让人眼前一亮。移动端跨平台技术，一直是移动开发中备受瞩目的一个方向，从Hybrid、React Native，到现在流行的Flutter，开发者对跨平台的探索就从未停止过，作为一个有多年移动端开发经验的程序员，我也见证了这些跨平台技术的兴衰。在Flutter出现之前，这些跨平台开发框架或多或少都有着这样那样的问题，虽然在一定程度上实现了跨平台开发，但却始终无法达到开发者心目中那个真正“好用”的跨平台框架的标准。

作为现在流行的跨平台开发框架，Flutter做到了“开发高效”“运行高效”“UI高一致性”，这三点也正是跨平台开发技术最核心的三个方面。高效的热重载功能，可以让开发者更快速地开发，而不用等待漫长的编译过程；高效的运行性能，让跨平台开发不再受性能掣肘；UI的高一致性，让跨平台开发能够真正用于生产实践。随着社区资源的不断丰富，Flutter必将引领跨平台开发进入一个新的天地。

回顾整个2019年，Flutter在中国开发者社区中引起了越来越多的关注，众多开发者投入Flutter的研究热潮中。在社区中，也有大量的文章介绍Flutter的相关技术，但这些零零散散的文章很难让初学者对Flutter有一个完整的认识，也很难让初学者理解Flutter的设计理念。再加上Flutter使用一门全新的开发语言——Dart，以及全新的声明式编程方式，也让很多开发者无从下手。所以，本书的出现，对于初次接触Flutter的开发者来说，是非常好的一本入门指南；同时，对于有一定Flutter经验的开发者来说，也是深入了解Flutter的不二之选。

仔细阅读本书，你会发现作者从Flutter开发的各个方面入手，从使用到原理，逐步深入，带领读者一探Flutter的实现原理和使用技巧，直白清爽的行文和简洁扼要的归纳，让读者读起来非常轻松。同样作为一名Flutter开发者，我深知写这本书的难度。相较于使用，知识的架构梳理和归纳总结才是更为重要的，这也需要写书的人有着深厚的技术功底和极佳的文笔。通过阅读这本书，我也深刻地感受到了作者写这本书的不易，讲解Flutter开发不难，难的是能够让读者学有所获，能够建立自己的知识体系架构，很高兴的是，这本书做到了。

最后，感谢本书作者的邀请，让我为本书作序，有幸提前阅读本书，实乃人生一大快事。

徐宜生

《Android群英传》《Android群英传：神兵利器》作者

2020年3月1日于上海

前言

笔者自2016年开始接触跨平台相关的工作，最初接触的框架是Cordova和Ionic，再到后面是React Native和Weex。而接触Flutter是从2017年开始的，那时候Flutter社区还不如现在成熟，很多资料都需要自己从源码中查找，而从那时起，笔者便积攒了不少与Flutter相关的资料。

2018年，机缘巧合地参与了掘金举办的Flutter征文比赛并获奖后，笔者就开始不间断地在掘金分享与Flutter相关的文章。在之后一年多的时间内，完成了近24篇Flutter的技术文章分享，如今无论是系列文章数还是单篇点赞阅读数，均已跃居掘金社区Flutter标签排名第一位。

除了产出文章，笔者在GitHub也相继开源了Flutter实战项目gsy_github_app_flutter、Flutter学习演示项目gsy_flutter_demo和Flutter电子书项目gsy_flutter_book。这三个项目至今收获了近12 000个Star，占据了笔者所有GitHub项目总Star数一半之多，由此也反映出Flutter开发者在这一年多时间内的迅猛增长。

随着文章的增多与阅读群体的扩大，笔者忽然发现原有文章的知识体系显得过于松散，并且某些内容对于初学者不够友好。因为Flutter近两年的快速发展，有些知识点已经过于陈旧，所以笔者萌生了重新整理Flutter知识内容的想法。当时恰好有幸收到了电子工业出版社宋亚东先生的邀请，于是顺理成章就有了本书的诞生。

在开始编写本书后才发现，写书比起写文章复杂得多，因为写文章时大多比较碎片化，有时候文章的内容会以读者已经掌握的基础为前提。但是写书时，更多需要考虑读者的阅读感受和理解能力，梳理的知识体系和讲解的知识点不能再像文章一样粗犷，所以投入的时间与精力也成倍上升。同时，在整理本书的过程中，笔者也收获了不少新的感悟，这些感悟最终也融入本书中被沉淀下来。

作为如今大前端浪潮中的一员，从Android到跨平台再到如今的大前端领域，笔者参与过各式各样平台的线上项目开发，也开源过Flutter、Java、Kotlin、React Native、Weex等实战项目。如今回顾起来，学习一门语言或者框架的根本不在于如何使用，而是需要理解它们的设计理念，学习它们解决问题的思路。无论什么语言或者框架，它们最终解决问题的思路都会殊途同归。

所以，本书不只是Flutter的入门教程，更会给读者深入解析Flutter框架设计中的方方面面，为读者由浅入深地介绍Flutter的设计思想，然后通过实战技巧与源码解析为读者的Flutter之路披荆斩棘，带读者走进不一样的Flutter世界。

同时，本书也将结合gsy_flutter_demo与gsy_github_app_flutter项目为读者带来完整的实战体验，欢迎读者在掘金和GitHub上直接进行交流，笔者将尽自己所能为大家排忧解惑。

GitHub地址：https://github.com/CarGuo。

掘金地址：https://juejin.im/user/582aca2ba22b9d006b59ae68/posts。

郭树煜

第1章 跨平台开发的发展/1
1．1 跨平台开发的演进/2
1．2 Cordova/2
1．3 React Native/3
1．4 Flutter/4
1．5 综合对比/6
1．5．1 开发环境/6
1．5．2 实现原理/7
1．5．3 开发语言/7
1．5．4 界面开发/8
1．5．5 插件开发/11
1．5．6 编译和产物/12
1．5．7 热更新和支持平台/12

第2章 走进Flutter的世界/14
2．1 开发环境/15
2．1．1 前置准备 15
2．1．2 安装Flutter开发环境/17
2．1．3 配置编辑器/18
2．2 Dart语言/24
2．2．1 基础语法/24
2．2．2 setter/getter/25
2．2．3 final/const/26
2．2．4 import/26
2．2．5 基础数据类型/26
2．2．6 逻辑语句与操作符/29
2．2．7 var与dynamic/31
2．2．8 函数方法/32
2．2．9 类、接口和继承/32
2．2．10 mixins/34
2．2．11 构造方法/36
2．2．12 异常处理/36
2．2．13 Isolate/37
2．2．14 Zone/38
2．2．15 异步执行/39
2．2．16 拓展方法/41
2．3 Flutter控件介绍/42
2．3．1 无状态控件（StatelessWidget）/42
2．3．2 有状态控件（StatefulWidget）/43
2．3．3 Flutter常用控件/45
2．3．4 Flutter页面/50
2．3．5 路由跳转/53
2．4 Flutter常见开发技巧/55
2．4．1 常见的问题处理/55
2．4．2 Widget Key/58
2．4．3 获取状态栏高度和字体缩放/61
2．4．4 状态栏颜色和图标颜色/62
2．4．5 控件圆角裁剪/62
2．4．6 懒加载/64
2．4．7 ChangeNotifier/65

第3章 Flutter的灵魂：Widget/68
3．1 配置文件Widget/69
3．2 大脑仓库Element/71
3．2．1 Element的大脑中枢/72
3．2．2 Element的仓库存储/73
3．2．3 Element的分类/75
3．2．4 Element桥接连通/76
3．3 绘制实例RenderObject/77
3．3．1 RenderObject的子类/77
3．3．2 RenderPadding/80
3．3．3 RenderObject的绘制/83
3．4 渲染图层Layer/86

第4章 Flutter Widget分类对比/90
4．1 Widget的状态分类/91
4．2 Element分类/98
4．3 RenderObject分类/101
4．3．1 RenderBox/102
4．3．2 RenderSliver/104
4．3．3 ViewPort/107
4．4 单元素与多元素分类/122
4．4．1 自定义MultiChildRenderObjectWidget/123
4．4．2 CustomMultiChildLayout/130
4．5 InheritedWidget共享状态/133
4．6 ErrorWidget异常处理/136

第5章 Flutter Framework/138
5．1 线程模型/139
5．2 动画实现/145
5．2．1 路由动画/149
5．2．2 Hero动画/150
5．2．3 Flare动画/153
5．3 手势与触摸/157
5．3．1 事件流程/158
5．3．2 hitTest/159
5．3．3 dispatchEvent/160
5．3．4 事件竞争/161
5．3．5 PointerDownEvent/161
5．3．6 开始竞争/163
5．3．7 滑动事件/165
5．4 滑动Physic/166
5．4．1 ScrollConfiguration/167
5．4．2 ScrollPhysics的工作原理/169
5．4．3 applyPhysicsToUserOffset/171
5．4．4 applyBoundaryConditions/172
5．4．5 createBallisticSimulation/172
5．4．6 Simulation/174
5．5 图片加载/175
5．6 网络请求/188

第6章 Flutter状态管理/190
6．1 Flutter中的状态管理/191
6．2 Stream/193
6．2．1 Stream的简单使用/193
6．2．2 Stream的工作流程 194
6．2．3 Stream中的同步和异步/197
6．2．4 Stream中的广播和非广播/198
6．2．5 Stream的变换/199
6．2．6 StreamBuilder/199
6．2．7 RxDart/200
6．3 BLoC/201
6．4 scoped_model/204
6．5 flutter_redux/206
6．6 Provider/212
6．7 总结对比/218

第7章 混合开发 220
7．1 Flutter混合开发/221
7．2 Flutter工程集成原生插件/225
7．2．1 MethodChannel/227
7．2．2 PlatformView/231
7．2．3 新版Android Plugin/242
7．3 原生工程集成Flutter项目/244
7．4 FlutterBoost/249

第8章 Flutter开发实战/253
8．1 Flutter开发中的入口/254
8．1．1 程序入口/254
8．1．2 应用入口/254
8．1．3 页面入口/256
8．2 基础控件/258
8．2．1 TabWidget/258
8．2．2 AppBar/265
8．2．3 下拉刷新和底部加载更多/268
8．2．4 输入框/274
8．2．5 矢量图库/281
8．2．6 自定义绘制/282
8．2．7 Align和Positioned/285
8．2．8 控件小技巧/288
8．3 路由跳转/291
8．4 状态管理/293
8．4．1 BLoC另类的实现/293
8．4．2 redux的拦截处理/296
8．4．3 scoped_model的局部共享数据/299
8．5 网络请求/302
8．5．1 序列化/307
8．5．2 built_value序列化/309
8．6 多语言与主题/310
8．6．1 主题/312
8．6．2 多语言/313
8．7 多环境配置/317
8．8 完整项目实战/320

第9章 调试打包/322
9．1 JIT与AOT/323
9．2 Android打包/324
9．3 iOS打包/326
9．4 Web和PC打包/328
9．5 性能调试/328
9．6 开发工具/332
9．6．1 DartPad/332
9．6．2 Supernova/332
9．6．3 Hot UI/334
9．6．4 Layout Explorer/335