Flutter组件精讲与实战

前言

Flutter是谷歌公司的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。现在，主流的移动开发平台是Android和iOS，每个平台上的开发技术不一样，如在 Android 中支持Java与Kotlin，而在iOS中支持ObjectC与Swift，针对每一个开发平台都需要特定的人员开发。
轻松时别忘了努力，忙碌时别忘了梦想，万物皆有裂痕，那是光照进来的地方。
在本书的每一章、每一节落笔前的构思时，笔者都在考虑如何才能把各个知识点由简到详并更有条理地论述，也在考虑如何才能以简单易懂的方式使读者快速理解每个知识点并在实际开发项目中使用。
本书共分两篇，基础篇对横向分析的组件进行精讲分析； 实战篇对纵向的App主体结构进行搭建。基础篇每一个环节都有对应的示例，由简至繁共提供了300多个示例，读者可以一边阅读一边练习，以掌握Flutter开发中所使用的常见组件的功能，通过这一套组件示例的淬炼，可以使读者在Flutter开发中得心应手。实战篇系统讲解一个App从创建项目到项目UI系统搭建完成，读者可以通过本书思路与实战内容学会从0架构一个App。
本书提供了源码基础架构，读者可以直接在此基础上搭建企业级应用。
本书主要内容
本书主要从两方面详细讲解Flutter的组件，基础篇（第1~22章）对Flutter开发中常用的每一个组件，系统讲解从基本使用到如何配置，并深入分析每一个属性； 实战篇（第23章）综合基础篇的组件实现一个类似抖音视频类应用效果实战案例，讲解如何使用Flutter从0到1开发一个App。
第1章简述Flutter与Dart的发展历程，以及Dart语言的核心基础。
第2章介绍MaterialApp组件的使用场景及设计理念，通过Demo实例详细讲解MaterialApp与CupertinoApp的基本使用、路由功能配置、主题ThemeData的详细配置使用、多主题配色功能、多语言环境等。
第3章分析Scaffold组件的使用场景，通过图文方式综述Scaffold组件的基本组成部分及适用场景，将会分析讲解FloatingActionButton悬浮按钮的详细配置、侧拉页面Drawer的配置使用、BottomNavigationBar配置底部导航栏菜单。
第4章是对标题栏AppBar的详细分析，会讲解AppBar的基本使用配置、TabBar实现多标签栏配置、TabPageSelector等。
第5章详细分析文本显示组件Text，详细讲解Text的使用、宽高度适配、文本样式的配置、自定义字体、富文本RichText及流式布局的文本标签等。
第6章详细讲解文本输入框TextField组件，详细讲解TextField的输入格式限制、边框样式InputDecoration、提示文本、文本控制器TextEditingController、焦点控制、光标样式配置、键盘配置及一个搜索框的实现等。
第7章综述容器Container组件的使用场景、宽高设定、内外边距设定、背景图片、背景阴影、圆角边框、演变样式、AnimatedContainer动画组件、自定义打洞效果与手撕优惠券的效果、ConstrainedBox等。
第8章详细分析按钮MaterialButton组件，详细讲解MaterialButton、其他常见的Button组件、悬浮按钮的旋转变换、IconButton系列按钮、自定义动画效果按钮AnimatedButton、自定义进度圆圈交互的动画按钮等。

第9章详细分析UI布局组件，内容涉及线性布局Column与Row、帧布局Stack、弹性布局Flex、流式布局Wrap、基于Wrap实现的Tag标签、流式布局Flow、自定义圆形动态弹出菜单、自定义类似开源中国的圆形动态菜单、自定义向上弹出的动态菜单等。
第10章讲解图片组件Image，内容涉及Image组件的基本使用、Image组件多种创建方式、加载网络图片、加载本地图片、图像混合模式BlendMode分析、圆角图片的加载、CachedNetworkImage组件的使用分析、加载圆角图片、高斯模糊效果、将Widget保存为图片、图片添加水印、缩放图片、拖动图片等。
第11章讲解复选框CheckBox组件，内容涉及CheckBox基本创建、使用及常用属性配置、CheckboxListTitle组件使用分析、自定义美化复选框效果等。
第12章讲解单选框Radio组件，内容涉及Radio组件的基本使用、自定义Radio单选框效果、RadioListTitle基本使用、优惠券选择弹框。
第13章讲解开关Switch组件，Switch的基本使用及SwitchListTitle组件的使用。
第14章讲解手势处理系列组件，内容涉及GestureDetector组件、Ink与InkWell组件的使用分析、InkResponse组件使用分析等。
第15章讲解滑动视图ScrollView系列组件，涉及SingleChildScrollView、NestedScrollView组件与SliverAppBar组件使用分析、CustomScrollView组件、滑动折叠效果的AppBar案例、NotificationListener、轮子滚动ListWheelScrollView、自定义抽屉效果DragContainer组件等。
第16章讲解列表ListView组件，内容涉及ListView组件的基本使用、控制器ScrollController的分析、ListView结合RefreshIndicator实现下拉刷新、SmartRefresher组件实现下拉刷新与上拉加载更多效果等。
第17章讲解九宫格组件GridView，内容包括GridView组件的使用场景及常用的构建方式等。
第18章讲解Clip裁剪组件系列组件，涉及矩形裁剪ClipRect、圆角矩形裁剪ClipRRect、椭圆形裁剪ClipOval、路径裁剪ClipPath及自定义五角星评分组件等。
第19章讲解Matrix4矩阵，涉及Matrix4矩阵简述、Transform组件的综合使用、通过Matrix4实现平移、旋转、缩放等。
第20章讲解绘图专题，涉及基本图形的绘制、Path构建各种自定义图形、贝塞尔曲线绘制、绘制文本、绘制图片及绘制动画的实现等。
第21章为动画专题，内容涉及Animated系列的动画组件、Tween系列的动画、自定义抖动动画组件ShakeAnimationWidget、自定义闪光过渡动画、Hero切换过渡动画、Material motion规范的预构建动画等。
第22章讲解其他常用Widget，本章为其他常用组件的补充描述章节，内容涉及WidgetsBindingObserver、FittedBox、FutureBuilder、刷新圆圈组件等。
第23章为综合案例实战内容，类似抖音视频播放类App的UI构建，内容涉及项目打包版本配置、基础框架的封装、权限请求封装、启动项配置、广告倒计时页面、视频播放列表的首页页面、下拉自动回弹的个人中心页面等。
本书源代码
扫描下方二维码，即可下载本书源代码。

本书源代码下载

致谢
在本书完稿之际，回顾6个多月的写作时光，为自己的黄金时间分割方法，为自己的坚持，为每周的骑行释放，为自己的不为环境变化而放弃的执着而感到欣慰与自豪。
感谢我的家人，在本书的创作期间，给予我奋斗的精神力量与生活方面无微不至的照顾，使我能够全身心地利用每一天的每一分钟。
感恩我曾经所经历过的、挥洒过汗水和青春的学校与公司，以及项目中的每个人与每件事情，这些都是我生命中的记忆，是记忆也是每天的动力。
同时要感谢我的工作伙伴Java大神刘俊亮、李少卿所提的方向建议，Android大神马岩松、班磊及iOS大神魏贤对本书的纠错。
后感谢清华大学出版社的赵佳霓编辑，本书能够顺利出版离不开她细心、负责任的工作态度。
由于作者写作水平与时间有限，书中难免存在不妥之处，请读者见谅，并提宝贵意见。
赵龙2021年7月

本书系统讲解 Flutter 中涉及的组件，内容翔实、面面俱到，通过阅读本书，读者能够掌握如何使用 Flutter 来编写跨平台移动客户端应用，并且对应用到的组件有透彻的理解。 本书共分为2篇：基础篇（第1~22章）对Flutter开发中常用的每一个组件，例如MaterialApp、Scaffold、Container、MaterialButton、CheckBox、Switch、ListView等，系统讲解从基本使用到如何配置，并深入分析每一个属性，每一个环节都有对应的案例实现；实战篇（第23章）综合基础篇的组件来实现一个类似抖音视频类效果实战案例，讲解如何使用Flutter从0到1开发一个App。 本书由简至繁提供了300多个示例，读者可以一边阅读一边练习，以掌握Flutter开发中使用的常见组件功能。本书提供的源码基础架构，读者可以直接在此基础上搭建企业级的应用。 本书面向Flutter初学者，Web前端、iOS开发、Android的开发人员，以及想更多了解Flutter并进阶实战的技术人员阅读。

赵龙，一个爱骑自行车的程序员，也喜欢喝点茶，致力于分享自己的所感所悟，为移动应用程序开发生态圈的建设贡献自己的一份力量。现任知轮科技大前端部门架构师，兼任山西软为科技有限公司技术顾问，CSDN认证年度博客专家，CSDN知名专栏作者，网易云课堂“玩转大前端”网校创始人。先后从事过 Java EE 、Android开发架构、iOS开发、小程序开发、产品设计、项目管理学等领域的工作，并在大量的实践中积累了丰富的经验，也形成了一套完整的移动互联网开发解决方案，在各大技术社区分享了共1000多篇技术文章，并发布了“Flutter从简到详”系列视频教程。

目录

基础篇

第1章Flutter与Dart语言

1.1Dart语言概述

1.2Flutter概述

1.3Flutter的编译模式

1.4Dart与Flutter的语法基础概述

1.4.1Dart语言的基本数据类型

1.4.2Dart语言的变量

1.4.3Dart语言的方法

1.4.4Dart语言的Map、List、Set

1.4.5Dart语言的流程控制

1.4.6Dart语言的异步编程

1.5Android Studio的调试技巧

1.5.1断点调试

1.5.2Flutter Inspector视图定位工具

1.5.3Flutter Performance内存管理工具

1.5.4Flutter 常用命令

第2章MaterialApp组件的精通使用分析

2.1MaterialApp组件精通使用的简单描述

2.2MaterialApp基本使用

2.3MaterialApp组件的路由routes配置概述

2.4路由routes配置

2.5路由配置404

2.6路由观察者

2.6.1基本使用

2.6.2route 解析

2.6.3NavigatorObservers实战

2.6.4动态路由实战

2.6.5自定义动态路由实战

2.6.6自定义圆形过渡效果路由

2.6.7特殊情况动态路由实战

2.6.8关闭当前页面

2.7样式ThemeData精讲

2.7.1brightness 属性分析

2.7.2primarySwatch属性分析

2.7.3primaryColor属性分析

2.7.4accentColor属性分析

2.7.5与触觉显示相关属性分析

2.7.6其他主题概述

2.8多主题适配

2.8.1一行代码将App渲染成灰色

2.8.2浅谈Provider进行状态管理

2.8.3Provider进行多数据模型状态管理

2.9多语言环境配置

2.9.1配置日期组件显示中文

2.9.2配置应用不适配的系统语言默认为英文

2.9.3保存用户对应用程序语言环境的偏好设置

2.9.4应用内切换语言环境然后动态更新当前语言环境

2.9.5应用内显示文字适配多语言环境

2.10StatefulWidget、Context、State

2.11语义设计Semantics

2.12Widget的分析

第3章Scaffold组件的详细综述

3.1Scaffold的基本使用

3.2FloatingActionButton的详细配置

3.2.1FloatingActionButton的类型

3.2.2FloatingActionButton的常用属性使用分析

3.2.3FloatingActionButton的shape属性分析

3.3Drawer配置侧拉页面

3.3.1用户信息组件UserAccountsDrawerHeader

3.3.2DrawerHeader

3.3.3单击按钮打开与关闭侧拉页面

3.4BottomNavigationBar配置底部导航栏菜单

3.4.1items属性分析

3.4.2type属性分析

3.4.3bottomNavigationBar结合独立的StatefulWidget使用

3.4.4bottomNavigationBar页面保活解决方案

3.5BottomAppBar配置底部导航栏菜单

3.6底部标签栏bottomSheet

第4章AppBar组件的详细综述

4.1AppBar的基本使用

4.1.1title属性分析

4.1.2线性布局Row在属性title中的使用

4.1.3Row标签结合PageView实现滑动切换

4.1.4Row标签结合TabBarView实现滑动切换

4.1.5MediaQuery解析

4.2TabBar结合TabBarView

4.3AppBar的bottom属性

4.4AppBar的leading属性

4.5AppBar的actions属性

4.5.1Icon的样式配置

4.5.2AppBar的iconTheme与actionsIconTheme

4.6AppBar的flexibleSpace属性

4.7SliverAppBar使用分析

4.8FlexibleSpaceBar使用分析

4.9SliverAppBar经典布局效果

4.10AppBar、SliverAppBar对比

4.11AppBar的shape属性分析

第5章文本显示Text组件

5.1文本显示组件的基本使用

5.2样式组件TextStyle的使用分析

5.2.1样式组件TextStyle的inherit

5.2.2样式组件TextStyle的颜色配置

5.2.3文字大小fontSize

5.2.4文字粗细设置fontWeight

5.2.5文字斜体设置

5.2.6文字间距设置

5.2.7文字基线textBaseline分析

5.2.8装饰decoration分析

5.2.9自定义字体fontFamily配置

5.2.10字体列表fontFamilyFallback配置

5.2.11字体阴影shadows配置

5.2.12文本高度height配置

5.3Text中文字对齐方式

5.3.1文字过长显示省略号

5.3.2文字自动换行设置

5.3.3弹性布局综述

5.4富文本RichText组件的使用分析

5.5富文本RichText使用案例

5.6文本标签

5.6.1文本标签构建

5.6.2文本标签结合流式布局使用

5.7AnimatedDefaultTextStyle的使用分析

第6章文本输入框TextField组件

6.1TextField组件的基本使用

6.1.1输入的文字不可见

6.1.2设置输入的英文首字母大写

6.1.3设置弹出的键盘类型

6.1.4键盘回车键的样式与功能

6.1.5键盘回车键切换输入框

6.1.6FocusNode输入框焦点事件的捕捉与监听

6.1.7TextField 输入文本对齐配置

6.2TextField组件的设置及允许输入的文本格式

6.2.1输入字数限制

6.2.2输入行数限制

6.2.3只允许输入数字

6.2.4只允许输入英文字母A~Z的大小写

6.2.5自定义TextInputFormatter

6.3TextField组件InputDecoration

6.3.1TextField组件去掉默认的下画线

6.3.2TextField边框装饰OutlineInputBorder

6.3.3TextField边框装饰线的颜色配置

6.3.4TextField不可编辑

6.4TextField组件配置提示文本

6.4.1TextField的labelText使用

6.4.2TextField的preIcon使用

6.4.3TextField的countText使用

6.4.4TextField的helperText与errorText

6.5TextField组件控制器TextEditingController

6.6TextField组件光标样式配置

6.7一个搜索框

6.7.1搜索框SearchStaticBar组件构建

6.7.2搜索输入框SearchTextFieldBar组件构建

6.7.3搜索输入框使用案例

第7章Container组件

7.1Container组件的基本使用

7.1.1Container的大小限定分析

7.1.2Container自适应包裹子Widget

7.2Container组件的内外边距

7.2.1EdgeInsets分析

7.2.2Padding分析

7.2.3Container在ListView中对子item自适应包裹

7.3Container组件decoration应用

7.3.1BoxDecoration在Container中的应用分析

7.3.2BoxDecoration在Container中的配置阴影

7.3.3BoxDecoration在Container中的配置渐变过渡样式

7.3.4BoxDecoration配置背景图像

7.3.5BoxDecoration的shape属性配置使用

7.3.6ShapeDecoration在Container中的使用分析

7.4自定义ShapeBorder

7.4.1打洞效果

7.4.2手撕优惠券的效果

7.5AnimatedContainer的基本使用

7.6ConstrainedBox组件的使用分析

第8章按钮组件

8.1MaterialButton的使用分析

8.1.1ButtonThemeData的使用分析

8.1.2各种Color的使用分析

8.1.3MaterialButton的回调函数说明

8.1.4MaterialButton的shape使用分析

8.1.5MaterialButton的宽和高