Flutter实战

本书由浅入深地介绍了Flutter技术和开发流程，包含大量示例、图片，并含配套示例源码，可帮助读者循序渐进地掌握Flutter开发技术。

本书分为入门篇、进阶篇、实例篇三篇。

●入门篇：讲解Flutter技术的背景和简介、Flutter各种类型的Widget以及如何构建UI。

使读者掌握如何使用Flutter来构建UI。

●进阶篇：讲解Flutter中的事件机制、动画、自定义组件、文件、插件、国际化以及Flutter的核心原理等。

使读者对Flutter整体构建及原理有一个深入的认识。

●实例篇：以GitHub APP为例，把理论转为实际案例，介绍一个完整的Flutter应用的开发。

使开发者全面了解完整的Flutter APP开发流程。

杜文（网名wendux），现就职于字节跳动，掘金知名专栏作者、Flutter中文网社区创始人、Flutter中文社区开源项目发起人、GitHub社区知名开发者，也是dio、fly、DSBridge等多个知名开源项目作者。多年从事PC桌面开发、移动端开发以及Web开发，对大前端方向有着广泛的涉猎及丰富的开发经验。

本书由浅入深，带领读者从0基础入门学习Flutter，到深入掌握Flutter进阶技能。以Github APP为实例，完整讲解如何开发APP。助你迅速成为一个高级的Flutter的开发者。

【缘起】

在全球范围内，随着越来越多的知名公司将Flutter应用在自己的商业APP中，Flutter这门新技术逐渐进入了移动开发者的视野，尤其是当Google在2018年IO大会上发布了第一个Preview版本后，国内兴起了一股学习Flutter的热潮。

在Flutter发布之初，我在看完Flutter的原理介绍之后，就对它产生了浓厚的兴趣。当时，身边也有一些人比较关注Flutter，我也经常被问到关于Flutter的一些问题，比如Flutter怎么样，其与RN有什么区别，Flutter为什么要用Dart？当时还听到了一些批评的声音，比如有人认为Flutter只是重复造轮子，没有独特亮点，Flutter最大的缺点就是使用了Dart语言等。在听到这些问题及论调时，我深知这是由于评论者对Flutter不了解造成的，这与当时国内缺乏Flutter中文文档和教程有直接关系，很多人对Flutter的了解只停留在Google的发布会介绍（配有中文翻译）上。

在深入了解Flutter之后，我深知Flutter必将成为一个能够改变移动开发格局的里程碑级的作品，它从设计之初就兼顾性能和开发效率，并且借鉴了React（一个Web开发框架）的响应式UI框架设计思想等，总之，很难用一两句话说完Flutter的优点，同时我也很快成为Flutter的追随者。

为了更好地帮助国内开发者了解这门新技术，我于2018年年初开始翻译Flutter官网文档，同年4月上线了Flutter中文网，上线后反响很热烈，Flutter中文网也很快传播开来，百度搜索排名迅速提升到前三，截至目前，Flutter中文官网日浏览量在7万左右，每日独立访问人数近一万。

虽然Flutter中文网为国内开发者提供了很好的了解Flutter的资料，但是我经常会遇到一些对Flutter技术处于围观状态而不愿动手尝试的开发者。这主要是因为当时Flutter在国内没有成功案例，再加上新技术都有学习成本，所以即使有文档，也会有一些开发者犹豫是否投入学习。为了打消这部分开发者的疑虑，我想如果能用Flutter开发一个完整的APP发布到应用商店，这样开发者就可以在犹豫之际预先实际感受一下Flutter应用，有一个直观的了解之后，再做出判断就容易多了，为此，我开发了Gitme，它是一个GitHub客户端，它支持源码浏览、Issue、Label等GitHub的大多数功能，到目前为止，通过Gitme登录GitHub账号的用户有8000多人，日活用户有1000人。更重要的是，有很多人正是用了Gitme之后，才来学习Flutter的。

无论是做Flutter中文网，还是开发Gitme，我的主要目标都是帮助开发者学习Flutter，同时消除围观者的疑虑。但是当开发者们真正开始动手时，Flutter的生态问题就会变得尤为突出。由于在2018年年初Flutter才刚起步，很多基础的包和库都是空白，少数一些已有的库也大都是预览版（未到1.0），存在很多Bug。这个状况不是一两个人花一两天时间就能解决的，这需要聚集整个Flutter开发者社群之力，耗费数年时间才可能会有所改善。因此，在2018年4月份，我以Flutter中文网的名义发起了Flutter开源计划，该计划主要是开发一些常用的包来丰富Flutter生态，帮助开发者提高开发效率。自从在GitHub建立Flutter中文开发者社区官方账号以来，该社区前后开源了dio、cookieJar、flukit等多个项目，而dio在开源两周之后，迅速成为Flutter第三方包中星级排名第一的开源库。

虽然已经做了很多事情，但是仍有一些很有必要完成的事情，由于时间原因，一直被搁置。

随着越来越多的人学习Flutter，一部分开发者通过查看官网的文档就能入门，但也有很多开发者感觉学习时仍然有些吃力，主要原因有两个：首先官网的文档主要是为了引导开发者快速上手而写的，讲解并不是很详细；其次是我们虽然翻译了官方文档，但是对于Flutter SDK文档并没有翻译，而在开发中遇到的一些具体问题通常需要查看SDK文档才能解决。所以，要解决这两个问题，必须有一个系统化的Flutter教程，它不仅要可以快速引导开发者入门，而且要能触及一些细节和原理，最好还能提供一些学习和研究Flutter的方法。

因此，如果有一本书能系统地介绍Flutter的相关知识，那将是非常棒的！但是，当时市面上还没有关于Flutter的中文书籍，因此，我便计划写一本能由浅入深、系统地介绍Flutter的书。2018年12月，本书初稿完成，并在GitHub上开源，同时上线了电子书官网（https://book.flutterchina.club/） ，至今每天有3000多人在线浏览。那么为什么不出版呢。

如果直接出版，不仅有稿费，而且能保护知识产权。但是，无论是做中文网、开发Gitme，还是做Flutter开源项目，我的出发点都是为了帮助国内开发者了解、学习Flutter，这是一件非常有意义的事情。另外，由于成书比较仓促，当时书中存在很多错误，开源之后，有很多读者提建议来纠正书中的错误，时至今日，有78名开发者为本书提过建议，在此，我衷心地感谢你们。

起初，我并没有出版纸质书的打算，当时我认为开发者直接在线访问本书官网既方便又不用付费，何乐而不为。但在本书上线之后，很多读者添加笔者微信好友，表示非常有收获，很期待出版纸质图书，甚至还有热心的读者想预订！我理解，这是大家对我所做之事的认可和鼓励。考虑到确实有一部分读者，尤其是还没有毕业的学生，可能更喜欢通过纸质书来学习，为此，我决定与机械工业出版社合作，出版本书的纸质版，以满足部分读者的需求。

【本书结构】

本书采用由浅入深的方式介绍Flutter的技术原理，共分为三篇，15章，各篇的主要内容具体如下。

●第一篇，入门篇（第1～7章），包括Flutter技术的出现背景和简介、Flutter各种类型的Widget以及如何构建UI。通过学习本篇内容，读者可以掌握如何使用Flutter来构建UI。

●第二篇，进阶篇（第8～14章），包括Flutter中的事件机制、动画、自定义组件、文件、插件、国际化以及Flutter的核心原理等。通过学习本篇内容，读者可以对Flutter整体构建及原理有一个深入的认识。

●第三篇，实例篇（第15章），主要通过一个简化版的GitHub APP将前面介绍的各章内容结合起来，让开发者对完整的Flutter APP开发流程有一个总体了解。

由于Flutter的很多知识点都是相互交织的，很难将它们彻底划分开，所以本书中难免会出现一些在前面章节使用后面章节所介绍的知识点的情况，比如，我们在入门篇介绍进度指示器时会用到在进阶篇中才介绍的动画的相关知识。对于这种情况，书中会在相应的章节进行说明。读者既可以直接跳到后面了解相应知识点后再返回之前的章节，也可以先留一个印象，待逐步学习完后面相关章节之后再回顾一下前面的内容。

【本书特色】

我在大学期间读过侯捷（真名侯俊杰）老师所著的C++相关的一些书籍，在侯老师的《深入浅出MFC》一书中，有一句话令我印象非常深刻：“唯有深入，方能浅出。”我非常认同这句话，对于一门技术而言，只有对其了解得足够深入，才能用最浅显、通俗的话语将其描述出来。

做到深入浅出就是本书的一个主要目标。所以，本书不仅是想告诉读者如何使用Flutter，而且也非常关注各个知识点的底层实现及其设计思想。从本书章节的划分上来看，入门篇为“浅出”，进阶篇则是“深入”。另外，由于PC客户端开发、移动开发、Web开发这些经验我都有，而Flutter本质上是一个UI系统，而UI系统的设计和实现在“大前端”下有很多相通之处，所以对于本书中的一些知识点，我也会对比着其他UI系统（主要是Android或Web）中相应的实现进行讲解，以便于有相关开发经验的读者理解。

【读者对象】

●至少熟悉一种编程语言的读者；

●接触过PC客户端、移动开发或Web前端开发的读者。

前　言

【第一篇　入门篇】

●第1章　起步 2

1.1　移动开发技术简介 2

1.2　初识Flutter 10

1.3　搭建Flutter开发环境 14

1.4　Dart语言简介 26

●第2章　第一个Flutter应用 36

2.1　计数器应用示例 36

2.2　路由管理 42

2.3　包管理 51

2.4　资源管理 55

2.5　调试Flutter应用 60

2.6　Flutter异常捕获 67

●第3章　基础组件 73

3.1　Widget简介 73

3.2　状态管理 87

3.3　文本及样式 94

3.4　按钮 99

3.5　图片及ICON 102

3.6　单选开关和复选框 109

3.7　输入框及表单 110

3.8　进度指示器 122

●第4章　布局类组件 127

4.1　布局类组件简介 127

4.2　线性布局（Row和Column） 128

4.3　弹性布局（Flex） 133

4.4　流式布局 136

4.5　层叠布局 139

4.6　对齐与相对定位（Align） 141

●第5章　容器类组件 146

5.1　填充（Padding） 146

5.2　尺寸限制类容器 147

5.3　装饰容器（DecoratedBox） 152

5.4　变换（Transform） 153

5.5　Container 156

5.6　Scaffold、AppBar和底部导航 158

5.7　剪裁（Clip） 166

●第6章　可滚动组件 169

6.1　可滚动组件简介 169

6.2　SingleChildScrollView 171

6.3　ListView 172

6.4　GridView 179

6.5　CustomScrollView 184

6.6　滚动监听及控制 187

●第7章　功能型组件 194

7.1　导航返回拦截（WillPopScope） 194

7.2　数据共享（InheritedWidget） 195

7.3　跨组件状态共享（Provider） 200

7.4　颜色和主题 210

7.5　异步UI更新 215

7.6　对话框详解 219

【第二篇　进阶篇】

●第8章　事件处理与通知 242

8.1　原始指针事件处理 242

8.2　手势识别 245

8.3　事件总线 253

8.4　Notification 255

●第9章　动画 261

9.1　Flutter动画简介 261

9.2　动画基本结构及状态监听 265

9.3　自定义路由切换动画 270

9.4　Hero动画 273

9.5　交织动画 275

9.6　通用切换动画组件 278

9.7　动画过渡组件 286

●第10章　自定义组件 297

10.1　自定义组件方法简介 297

10.2　组合现有组件 298

10.3　组合实例：TurnBox 301

10.4　自绘组件（CustomPaint与Canvas） 305

10.5　自绘实例：圆形背景渐变进度条 309

●第11章　文件操作与网络请求 318

11.1　文件操作 318

11.2　通过HttpClient发起HTTP请求 320

11.3　dio HTTP请求库 327

11.4　示例：HTTP分块下载 329

11.5　使用WebSockets 334

11.6　使用Socket API 338

11.7　JSON转Dart Model类 338

●第12章　包与插件 348

12.1　开发Package 348

12.2　插件开发：平台通道简介 352

12.3　开发Flutter插件 355

12.4　插件开发：Android端API实现 357

12.5　插件开发：iOS端API实现 360

12.6　Texture和PlatformView 364

●第13章　国际化 375

13.1　让APP支持多语言 375

13.2　实现Localizations 379

13.3　使用Intl包 381

13.4　国际化中的常见问题 386

●第14章　Flutter核心原理 388

14.1　Flutter UI系统 388

14.2　Element与BuildContext 390

14.3　RenderObject和RenderBox 395

14.4　Flutter运行机制：从启动到显示 403

14.5　图片加载原理与缓存 410

【第三篇　实例篇】

●第15章　一个完整的Flutter应用 422

15.1　GitHub客户端示例 422

15.2　Flutter APP代码结构 423

15.3　Model类定义 424

15.4　全局变量及共享状态 427

15.5　网络请求封装 430

15.6　APP入口及主页 435

15.7　登录页 446

15.8　多语言和多主题 449

参考文献 452