Flutter组件详解与实战

本书秉承Flutter框架“一切皆为组件”的核心设计思想，配合大量实例，系统且全面地介绍Flutter 2.0中各式各样的组件。同时，穿插于全书的“Flutter框架小知识”和“Dart语法小贴士”也可帮助刚入门的读者迅速掌握框架和编程语言中必备的基础知识。

全书大致按照“由入门到精通”划分，又按功能板块细分，共分为3部分：基础篇（第1~5章）详细介绍基础布局、文字、图片、按钮、事件流、滚动列表等常用组件，既适合Flutter新手，也可帮助有一定经验的开发者查漏补缺。进阶篇（第6~12章）介绍更多与布局、动画、导航、人机交互、弹窗等功能相关的组件。最后扩展篇（第13~15章）则重点介绍如Sliver机制、高效渲染、打破约束、自定义布局等难点。

本书既可作为Flutter入门书籍，也可作为计算机软件从业人员的参考书，在工作或实战中遇到疑惑时通过本书附录中的索引，迅速查阅相关章节。

王浩然（Bradley Wang），现就职于美国硅谷互联网创业公司温哥华分部，担任软件架构师。毕业于加拿大顶j工程学院，滑铁卢大学计算机工程专业。曾任职多家五百强企业如 IBM，通用电气，TD银行等。有近二十年桌面应用开发经历，自2011年起开始从事手机APP以及Web开发，2018年初带领其公司团队使用Flutter，大幅提升开发效率。常活跃于各大英文开发者社区，GitHub，并在技术社区 Stack Overflow 兼任管理职责。

前言

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月

本书源代码

目录

基础篇

第1章基础布局

1.1什么是组件

1.1.1FlutterLogo

1.1.2Placeholder

1.1.3Container

1.2如何拆分布局

1.2.1Column

1.2.2Row

1.2.3Wrap

1.2.4Stack

1.2.5Positioned

1.3组件尺寸和位置

1.3.1SizedBox

1.3.2Align

1.3.3Center

第2章文字与图片

2.1文字

2.1.1Text

2.1.2DefaultTextStyle

2.1.3RichText

2.2图标与图片

2.2.1Icon

2.2.2IconTheme

2.2.3Image

2.2.4FadeInImage

第3章用户输入

3.1文本框

3.1.1TextField

3.1.2CupertinoTextField

3.2按钮

3.2.1ElevatedButton

3.2.2TextButton

3.2.3CupertinoButton

第4章异步操作(45min)

4.1进度条

4.1.1CircularProgressIndicator

4.1.2LinearProgressIndicator

4.1.3CupertinoActivityIndicator

4.2异步显示

4.2.1FutureBuilder

4.2.2StreamBuilder

第5章分页呈现(34min)

5.1列表和网格

5.1.1ListView

5.1.2ListWheelScrollView

5.1.3ReorderableListView

5.1.4GridView

5.1.5PageView

5.2滚动监听和控制

5.2.1Scrollbar

5.2.2RefreshIndicator

5.2.3Dismissible

5.2.4ScrollConfiguration

5.2.5NotificationListener

5.2.6SingleChildScrollView

进阶篇

第6章进阶布局(19min)

6.1边界

6.1.1Padding

6.1.2SafeArea

6.1.3FittedBox

6.1.4MediaQuery

6.2弹性布局

6.2.1Flex

6.2.2Expanded

6.2.3Flexible

6.2.4Spacer

6.3约束

6.3.1ConstrainedBox

6.3.2LimitedBox

6.3.3LayoutBuilder

6.3.4FractionallySizedBox

第7章过渡动画(19min)

7.1渐变效果

7.1.1AnimatedContainer

7.1.2AnimatedPadding

7.1.3AnimatedPositioned

7.1.4AnimatedOpacity

7.1.5AnimatedDefaultTextStyle

7.2组件切换

7.2.1AnimatedSwitcher

7.2.2AnimatedCrossFade

第8章人机交互

8.1触摸检测

8.1.1GestureDetector

8.1.2Listener

8.1.3MouseRegion

8.1.4IgnorePointer

8.1.5AbsorbPointer

8.2拖放

8.2.1Draggable

8.2.2DragTarget

8.2.3LongPressDraggable

第9章悬浮与弹窗(13min)

9.1悬浮

9.1.1OverlayEntry

9.1.2CompositedTransformTarget

9.1.3CompositedTransformFollower

9.2弹窗

9.2.1AlertDialog

9.2.2CupertinoAlertDialog

9.2.3SimpleDialog

9.2.4CupertinoPopupSurface

9.2.5ModalBarrier

9.3底部弹窗

9.3.1BottomSheet

9.3.2DraggableScrollableSheet

9.3.3CupertinoActionSheet

第10章界面导航

10.1导航

10.1.1Navigator

10.1.2WillPopScope

10.1.3Hero

10.2程序结构

10.2.1WidgetsApp

10.2.2MaterialApp

10.2.3CupertinoApp

扩展篇

第11章风格组件

11.1Material风格

11.1.1AppBar

11.1.2BackButton

11.1.3BottomNavigationBar

11.1.4ButtonBar

11.1.5Card

11.1.6Checkbox

11.1.7Chip

11.1.8CircleAvatar

11.1.9DataTable

11.1.10DatePickerDialog

11.1.11Divider

11.1.12Drawer

11.1.13DropdownButton

11.1.14ExpandIcon

11.1.15ExpansionTile

11.1.16FloatingActionButton

11.1.17IconButton

11.1.18Ink

11.1.19InkResponse

11.1.20ListTile

11.1.21Material

11.1.22OutlinedButton

11.1.23PopupMenuButton

11.1.24Radio

11.1.25Scaffold

11.1.26Slider

11.1.27SnackBar

11.1.28Stepper

11.1.29Switch

11.1.30TabBar

11.1.31TimePickerDialog

11.1.32ToggleButtons

11.1.33Tooltip

11.2Cupertino风格

11.2.1CupertinoContextMenu

11.2.2CupertinoDatePicker

11.2.3CupertinoNavigationBar

11.2.4CupertinoPageScaffold

11.2.5CupertinoPicker

11.2.6CupertinoSegmentedControl

11.2.7CupertinoSlider

11.2.8CupertinoSlidingSegmentedControl

11.2.9CupertinoSwitch

11.2.10CupertinoTabBar

11.2.11CupertinoTabScaffold

11.2.12CupertinoTabView

11.2.13CupertinoTimePicker

第12章进阶动画(67min)

12.1如何选择动画组件

12.2显式动画

12.2.1RotationTransition

12.2.2FadeTransition

12.2.3ScaleTransition

12.2.4SizeTransition

12.2.5SlideTransition

12.2.6PositionedTransition

12.2.7DecoratedBoxTransition

12.2.8AnimatedIcon

12.3自定义动画

12.3.1TweenAnimationBuilder

12.3.2AnimatedBuilder

12.3.3AnimatedWidget

第13章滚动布局

13.1Sliver

13.1.1CustomScrollView

13.1.2SliverToBoxAdapter

13.1.3SliverList

13.1.4SliverFixedExtentList

13.1.5SliverPrototypeExtentList

13.1.6SliverGrid

13.1.7SliverFillViewport

13.2Sliver导航条

13.2.1SliverAppBar

13.2.2FlexibleSpaceBar

13.2.3SliverPersistentHeader

13.3更多的Sliver组件

13.3.1SliverFillRemaining

13.3.2SliverSafeArea

13.3.3SliverPadding

13.3.4SliverLayoutBuilder

13.3.5SliverOpacity

13.3.6SliverVisibility

13.3.7SliverAnimatedList

第14章渲染与特效

14.1组件修饰

14.1.1Opacity

14.1.2DecoratedBox

14.1.3PhysicalModel

14.1.4RotatedBox

14.1.5Transform

14.1.6FractionalTranslation

14.1.7ImageFiltered

14.1.8BackdropFilter

14.1.9ShaderMask

14.2裁剪边框

14.2.1ClipOval

14.2.2ClipRect

14.2.3ClipRRect

14.2.4ClipPath

第15章深入布局(15min)

15.1测量尺寸

15.1.1IntrinsicWidth

15.1.2IntrinsicHeight

15.1.3AspectRatio

15.1.4PreferredSize

15.2性能与状态

15.2.1Offstage

15.2.2Visibility

15.2.3IndexedStack

15.2.4RepaintBoundary

15.3打破约束

15.3.1UnconstrainedBox

15.3.2OverflowBox

15.3.3SizedOverflowBox

15.4深度定制

15.4.1CustomSingleChildLayout

15.4.2CustomMultiChildLayout

15.4.3Flow

15.4.4CustomPaint

附录A