本书秉承Flutter框架“一切皆为组件”的核心设计思想，配合大量实例，系统且全面地介绍Flutter 2.0中各式各样的组件。同时，穿插于全书的“Flutter框架小知识”和“Dart语法小贴士”也可帮助刚入门的读者迅速掌握框架和编程语言中必备的基础知识。
全书大致按照“由入门到精通”划分，又按功能板块细分，共分为3部分：基础篇（第1~5章）详细介绍基础布局、文字、图片、按钮、事件流、滚动列表等常用组件，既适合Flutter新手，也可帮助有一定经验的开发者查漏补缺。进阶篇（第6~12章）介绍更多与布局、动画、导航、人机交互、弹窗等功能相关的组件。最后扩展篇（第13~15章）则重点介绍如Sliver机制、高效渲染、打破约束、自定义布局等难点。
本书既可作为Flutter入门书籍，也可作为计算机软件从业人员的参考书，在工作或实战中遇到疑惑时通过本书附录中的索引，迅速查阅相关章节。

基础篇
第1章 基础布局
1.1 什么是组件
1.1.1 FlutterLogo
1.1.2 Placeholder
1.1.3 Container
1.2 如何拆分布局
1.2.1 Column
1.2.2 Row
1.2.3 Wrap
1.2.4 Stack
1.2.5 Positioned
1.3 组件尺寸和位置
1.3.1 SizedBox
1.3.2 Align
1.3.3 Center
第2章 文字与图片
2.1 文字
2.1.1 Text
2.1.2 DefaultTextStyle
2.1.3 RichText
2.2 图标与图片
2.2.1 Icon
2.2.2 IconTheme
2.2.3 Image
2.2.4 FadeInImage
第3章 用户输入
3.1 文本框
3.1.1 TextField
3.1.2 CupertinoTextField
3.2 按钮
3.2.1 ElevatedButton
3.2.2 TextButton
3.2.3 CupertinoButton
第4章 异步操作(45min)
4.1 进度条
4.1.1 CircularProgressIndicator
4.1.2 LinearProgressIndicator
4.1.3 CupertinoActivityIndicator
4.2 异步显示
4.2.1 FutureBuilder
4.2.2 StreamBuilder
第5章 分页呈现(34min)
5.1 列表和网格
5.1.1 ListView
5.1.2 ListWheelScrollView
5.1.3 ReorderableListView
5.1.4 GridView
5.1.5 PageView
5.2 滚动监听和控制
5.2.1 Scrollbar
5.2.2 RefreshIndicator
5.2.3 Dismissible
5.2.4 ScrollConfiguration
5.2.5 NotificationListener
5.2.6 SingleChildScrollView
进阶篇
第6章 进阶布局(19min)
6.1 边界
6.1.1 Padding
6.1.2 SafeArea
6.1.3 FittedBox
6.1.4 MediaQuery
6.2 弹性布局
6.2.1 Flex
6.2.2 Expanded
6.2.3 Flexible
6.2.4 Spacer
6.3 约束
6.3.1 ConstrainedBox
6.3.2 LimitedBox
6.3.3 LayoutBuilder
6.3.4 FractionallySizedBox
第7章 过渡动画(19min)
7.1 渐变效果
7.1.1 AnimatedContainer
7.1.2 AnimatedPadding
7.1.3 AnimatedPositioned
7.1.4 AnimatedOpacity
7.1.5 AnimatedDefaultTextStyle
7.2 组件切换
7.2.1 AnimatedSwitcher
7.2.2 AnimatedCrossFade
第8章 人机交互
8.1 触摸检测
8.1.1 GestureDetector
8.1.2 Listener
8.1.3 MouseRegion
8.1.4 IgnorePointer
8.1.5 AbsorbPointer
8.2 拖放
8.2.1 Draggable
8.2.2 DragTarget
8.2.3 LongPressDraggable
第9章 悬浮与弹窗(13min)
9.1 悬浮
9.1.1 OverlayEntry
9.1.2 CompositedTransformTarget
9.1.3 CompositedTransformFollower
9.2 弹窗
9.2.1 AlertDialog
9.2.2 CupertinoAlertDialog
9.2.3 SimpleDialog
9.2.4 CupertinoPopupSurface
9.2.5 ModalBarrier
9.3 底部弹窗
9.3.1 BottomSheet
9.3.2 DraggableScrollableSheet
9.3.3 CupertinoActionSheet
第10章 界面导航
10.1 导航
10.1.1 Navigator
10.1.2 WillPopScope
10.1.3 Hero
10.2 程序结构
10.2.1 WidgetsApp
10.2.2 MaterialApp
10.2.3 CupertinoApp
扩展篇
第11章 风格组件
11.1 Material风格
11.1.1 AppBar
11.1.2 BackButton
11.1.3 BottomNavigationBar
11.1.4 ButtonBar
11.1.5 Card
11.1.6 Checkbox
11.1.7 Chip
11.1.8 CircleAvatar
11.1.9 DataTable
11.1.10 DatePickerDialog
11.1.11 Divider
11.1.12 Drawer
11.1.13 DropdownButton
11.1.14 ExpandIcon
11.1.15 ExpansionTile
11.1.16 FloatingActionButton
11.1.17 IconButton
11.1.18 Ink
11.1.19 InkResponse
11.1.20 ListTile
11.1.21 Material
11.1.22 OutlinedButton
11.1.23 PopupMenuButton
11.1.24 Radio
11.1.25 Scaffold
11.1.26 Slider
11.1.27 SnackBar
11.1.28 Stepper
11.1.29 Switch
11.1.30 TabBar
11.1.31 TimePickerDialog
11.1.32 ToggleButtons
11.1.33 Tooltip
11.2 Cupertino风格
11.2.1 CupertinoContextMenu
11.2.2 CupertinoDatePicker
11.2.3 CupertinoNavigationBar
11.2.4 CupertinoPageScaffold
11.2.5 CupertinoPicker
11.2.6 CupertinoSegmentedControl
11.2.7 CupertinoSlider
11.2.8 CupertinoSlidingSegmentedControl
11.2.9 CupertinoSwitch
11.2.10 CupertinoTabBar
11.2.11 CupertinoTabScaffold
11.2.12

Flutter是谷歌公司推出的一款全新前端框
架，主要用于移动应用程序（App）、网页及桌
面应用程序的开发，可实现一份代码多端运行。
Flutter于2021年3月3日推出2.0正式版。同时
，Ubuntu操作系统宣布将Flutter作为其首选开
发语言。开发者在使用Flutter时主要通过由多
个小组件（widgets）之间的相互配合与嵌套，
构建出复杂的程序页面，因此对于刚入门的
Flutter开发者而言，最迫切需要的就是增加
Flutter组件知识的储备，以便在面对错综复杂
的实战需求时，会选用最合适的组件。在谷歌公
司的官方英文教程中，点击量最大、评论反响最
好的也正是其“每周认识一个新组
件”（Widgets of the Week）系列视频。例如
，Flutter框架已内置一个
ReorderableListView组件，借助它，短短几行
代码就可以实现一个支持拖动排序且可动态加载
的列表，然而刚入门的开发者可能并不知道它的
存在，遇到类似的业务需求时，第一反应是自己
动手做，但那样就需要多写很多代码，浪费时间
不说，通常并不能写好，许多边界情况考虑不周
，可谓“加班加点写Bug”，勤劳地为自己和团
队挖了一个又一个坑。本书针对这些“痛点”，
并以当今用户对程序界面和动画效果的高要求为
出发点，秉承Flutter框架“一切皆为组件”的
核心设计思想，向读者系统地介绍Flutter中各
种组件，帮助广大开发者尽量避免“重复发明轮
子”。在熟悉并掌握一定数量的Flutter组件后
，开发者通常可在短时间内利用更少的代码实现
更多的需求，轻松迭代出美观、流畅、友好、高
效且符合原生系统风格的出色的应用程序。本书
分为基础篇、进阶篇与扩展篇3篇，并配有大量
Flutter代码实例。读者既可以按顺序阅读全书
，以增加和巩固自身的知识储备，也可先快速浏
览并简单熟悉这些组件后，在实战或工作中遇到
实际需求时再详细阅读相关章节。另外，有经验
的开发者还可以通过本书附录中的索引迅速查询
所有书中提及的Flutter组件。全书主要内容如
下：基础篇由第1~5章组成。其中，第1章介绍最
基本的组件排版与布局概念； 第2章详细介绍用
于渲染文字和图片的组件； 第3章讲解基础的文
本框和按钮等组件； 第4章介绍与异步操作、事
件流及进度条相关的组件； 第5章详细讲解大量
与滚动列表相关的组件。由于这些都是Flutter
框架中较为基础且常用的组件，因此本书这部分
内容较为详细，涵盖了40个组件的全部属性和参
数，并同时配有大量实战经验、技巧、实例等，
既可帮助初学者打好基础，也适合有一定基础的
Flutter开发者查漏补遗。进阶篇由第6~10章组
成。其中，第6章详细介绍Flutter的布局原理
，尤其是尺寸约束方面的知识，建议仔细阅读并
理解； 第7章介绍一些简单的隐式动画组件，开
发者借助这些组件，短短几行代码就能实现不错
的动画效果； 第8章介绍包括触碰、双击、平移
、拖放、捏拉缩放及立体触控等与用户交互相关
的组件； 第9章和第10章介绍由Overlay主导的
对话框、底部弹窗、导航器等功能组件，以及介
绍Flutter程序根部组件的作用。扩展篇由第
11~15章组成。其中，第11章按照字母顺序，简
单介绍大量Material风格和Cupertino风格的组
件，以确保读者在实战中遇到类似需求时知道从
合适的组件下手； 第12章配合大量视频教材，
全面介绍Flutter框架中与动画相关的知识，包
括补间动画、交错动画、动画控制器及如何在实
战中选择合适的动画组件等内容； 第13章介绍
Sliver机制，也就是Flutter框架中滚动组件的
核心机制，可支持多种不同类型的滚动列表及顶
部导航条的联动； 第14章主要介绍投影、半透
明、矩阵变形、模糊滤镜及裁剪边框等修饰性组
件； 第15章介绍与测量尺寸、提升性能、打破
布局约束及深度自定义渲染相关的组件。掌握了
这些知识后，相信读者一定会对Flutter框架有
更深的理解。最后，在此由衷感谢清华大学出版
社赵佳霓编辑为本书提出的许多宝贵意见，并为
图书出版付出的辛勤劳动； 另外，还要感谢笔
者的家人和朋友们，尤其是笔者的妻子，在疫情
期间承担了大部分家务并悉心照料刚出生的宝宝
，使笔者可以全身心投入写作。由于笔者水平有
限，且Flutter框架技术日新月异，书中难免存
在不完善之处，望读者见谅。
王浩然
2021年10月
本书源代码

本书共分为基础篇、进阶篇与扩展篇3部分，并配有大量Flutter 2.0代码实例。读者既可以顺序阅读全书，以增加和巩固自身的知识储备，也可先快速浏览并简单熟悉这些组件后，在实战或工作中遇到实际需求时再详细阅读相关章节。另外，有经验的开发者还可以通过本书附录中的索引迅速查询所有书中提及的Flutter组件。

《Flutter组件详解与实战》不但收集、整理了大量
Flutter组件，还同时将作者多年的实战经验融入书中。
理论与实践相结合，书籍脉络清晰，通俗易懂，涵盖了当
今前端界面设计的各方面知识。毫无疑问，本书是前端开
发者在该领域进阶的必备指南。
——黄文林 OLAP Vision技术部总监
从事软件开发多年领悟到了一点，真正有能力的人只
需很短时间就能将复杂的事情解释清楚，这也是本书的作
者给我留下的最显著的印象。在这本书中，作者以“一切
皆为组件”的思路带你一步步上手Flutter多种强大的开
发功能。一套代码，多个平台，这本书可以帮助刚入门
Flutter的你迅速成长为身经百战的“高手”。强烈推荐
本书！
——庄鑫溢 Microsoft资深iOS工程师
《Flutter组件详解与实战》中整理了大量组件，其
内容图文并茂，行文表达简明扼要。本书完全值得在你的
书桌上占有一席之地，当作一本工具书，在遇到困难时查
阅。庄子曰：水之积也不厚，则其负大舟也无力。相信通
读这本书后一定可以帮助初学者解决心中的问题及疑惑，
让大家更从容地面对工作中的需求。
——屈成铭 北京鑫亿网络科技有限责任公司首席架
构师
《Flutter组件详解与实战》内容丰富，并能把复杂
的东西解释得通俗易懂，让人茅塞顿开，感受到学习的快
乐。唯有深入方能浅出，这需要深厚的技术功底和丰富的
经验。希望你也能一起踏上这趟进阶之旅。
——李高昊 得物资深Flutter工程师

第3章
用 户 输 入
用户输入是大部分应用程序必不可少的环节，本章将介绍2种最基本的用户输入类型，分别是文本框和按钮。更复杂的用户操作，如滑动手势和拖放等，可参考第8章“人机交互”。
3.1文本框
文本框可以让用户在应用程序中输入文本内容，例如搜索栏、聊天窗口的输入区域、表单中需要填写的快递信息或者登录界面的用户名和密码等地方都能找到文本框的身影。在Flutter框架中，最常见的文本框有TextField和CupertinoTextField这2个组件，分别对应安卓的Material风格和iOS的Cupertino风格。
3.1.1TextField
TextField组件是Flutter中最常用的文本框组件。它的基本用法非常简单，同时又支持各式各样的自定义。该组件虽然没有任何必传参数，但实战中经常需要传入onSubmitted参数，用于在用户完成输入时处理业务逻辑。例如，可将用户输入的内容打印至终端，代码如下：
TextField(
onSubmitted: (value) =>
print("submitted: $value"),
)
图31默认样式的文本框
运行效果如图31所示。
TextField共有5种状态： 无焦点、无焦点且错误、有焦点、有焦点且错误、禁用。通常有焦点时TextField需要呈现出与众不同的样式，帮助用户辨认输入的文字将被录入哪个文本框。禁用的文本框(enabled属性为false时)无法被用户选中，因此不可能有焦点。另外，这里的错误不是指程序运行时抛出异常或报错，而是指TextField可以呈现出一种错误的状态，主要用于提示用户可能输入有误，例如电子邮箱不符合格式等。
在默认情况下，TextField组件遵循Material界面风格，自带一条下画线。当页面焦点不在文本框时下画线呈灰色，一旦获得页面焦点，下画线会自动变成程序当前主题风格的主颜色(如蓝色)，并出现光标闪烁。若该设备没有物理键盘，则屏幕软键盘会同时弹出。当需要提示输入有误时，下画线则会变成红色。
1. InputDecoration
TextField组件的大部分外观修饰可通过向decoration参数传入InputDecoration实现。而InputDecoration本身包罗万象，可以通过其构造函数传入大量参数，以便设置前缀、后缀、提示信息、边框、填充色及错误状态等需要显示的文本及样式。
1) 前缀
InputDecoration有3类前缀，如果同时设置则会依次显示，互不冲突。第1类是可用icon属性设置，在TextField前面插入一个图标。第2类是由prefixIcon(前缀图标)和prefixIconConstraints(前缀图标的布局约束)属性设置，用于定义显示在icon之后的前缀图标。第3类是prefix(前缀组件)、prefixText(前缀文本)和prefixStyle(前缀样式)属性设置，用于定义显示在icon和前缀图标之后的前缀文本。这里为了演示，同时使用上述3类前缀，代码如下：
TextField(
decoration: InputDecoration(
icon: Icon(Icons.add),//图标(加号)
prefixIcon: Icon(Icons.lock),//前缀图标(小锁)
prefixText: "https://", //前缀文本内容
),
)
图32文本框前缀在有无焦点时
的效果对比
运行时，icon属性设置的图标(加号)首先被显示出来，接着是prefixIcon属性设置的前缀图标(小锁)。这2个图标平时显示为灰色，并在文本框获得焦点时变成程序的主题色(如蓝色)，并且在文本框获得焦点时，prefixText中的内容也会被显示出来，运行效果如图32所示。
上例代码中没有用到以下几个属性： 首先prefixIconConstraints用于定义prefixIcon属性中图标的布局约束，例如规定最小宽度等。另外，prefix属性和prefixText属性只能二选一，前者可以接收任何Widget类型，因此可以用于显示任意组件，而后者则直接接收String类型，故只支持文本。若选用prefixText使用文本，则可以用prefixStyle属性修改文本样式。
2) 后缀
InputDecoration还有3类设置后缀的属性。第1类是counter、counterText、counterStyle等属性，用于定义TextField的计数器。第2类是suffixIcon(后缀图标)和suffixIconConstraints(后缀图标的布局约束)属性，用于定义显示TextField末尾处的后缀图标。第3类是suffix(后缀组件)、suffixText(后缀文本)和suffixStyle(后缀样式)属性，用于定义后缀文本。例如，可同时设置这3类后缀，代码如下：许或禁止的字符串，而且还支持直接传入正规表达式(RegExp)作为筛选条件。
实战中，最常使用的是BlacklistingTextInputFormatter和WhitelistingTextInputFormatter这2个继承于TextInputFormatter的类，分别对应“黑名单”和“白名单”。在2020年8月更新的Flutter版本v1.20.0中，为响应“计算机术语应尽量避免不必要的种族歧视”的号召，将这2类更改合并为FilteringTextInputFormatter类，并提供了2个构造函数，分别是allow(允许)和deny(禁止)。这2个构造函数都可以接收一个字符串或正规表达式作为筛选条件，并支持可选的replacementString参数，用于将筛选出的词语替换为任意其