Flutter学习总纲教程
Flutter Widget 目录
准备
学习Flutter之前,必须要了解(不需要多么精通,但至少要了解)Dart的基础特性。
- Dart基础特性 · Dart 是 Google 开发的新一代编程语言,Flutter就是只用dart语言编写的。
- 在Windows上搭建Flutter开发环境
- Flutter之初体验 · 创建一个Flutter Android项目
Flutter 结构和导航
- Flutter Scaffold · Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API
- Flutter AppBar · 一个Material Design应用程序栏,由工具栏和其他可能的widget(如TabBar和FlexibleSpaceBar)组成
- Flutter 通过TabController 定义TabBar · 监听TabBar与TabBarView的交互
- Flutter BottomNavigationBar · 底部导航条、以及实现页面切换、模仿XXApp的底部导航栏布局
- Flutter MaterialApp · 一个方便的widget,它封装了应用程序实现Material Design所需要的一些widget。
- Flutter Drawer · 侧滑菜单、抽屉从Scaffold边缘水平滑动以显示应用程序中导航链接的Material Design面板。
- Flutter SliverAppBar · 与CustomScrollView集成的材质设计应用栏。随内容一起滑动的头部 - 滞留头部
Flutter 按钮
- Flutter RaisedButton · Material Design中的button, 一个凸起的材质矩形按钮
- Flutter OutlineButton · 边框按钮
- Flutter FloatingActionButton · 一个圆形图标按钮,它悬停在内容之上,以展示应用程序中的主要动作
- Flutter FlatButton · 一个扁平的Material按钮
- Flutter IconButton · 一个Material图标按钮,点击时会有水波动画
- Flutter PopupMenuButton · 当菜单隐藏式,点击或调用onSelected时显示一个弹出式菜单列表
- Flutter ButtonBar · 水平排列的按钮组
- Flutter DropdownButton · 下拉菜单
输入框和选择框
- Flutter TextField · 文本输入框
- Flutter Checkbox · 复选框,允许用户从一组中选择多个选项。
- Flutter Radio · 单选框,允许用户从一组中选择一个选项。
- Flutter Switch · On/off 用于切换一个单一状态
- Flutter Slider · 滑块,允许用户通过滑动滑块来从一系列值中选择。进度条
- Flutter Date & Time Pickers · 日期&时间选择器
对话框、Alert、Panel
- Flutter SimpleDialog · 简单对话框可以显示附加的提示或操作
- Flutter AlertDialog · 一个会中断用户操作的对话款,需要用户确认
- Flutter BottomSheet · BottomSheet是一个从屏幕底部滑起的列表(以显示更多的内容)
- Flutter ExpansionPanel · 扩展面板,包含一个标题和一个正文,可以展开或者折叠,面板展开,主体可见。
- Flutter SnackBar · 具有可选操作的轻量级消息提示,在屏幕的底部显示。
- Flutter AboutDialog · 是一个包含应用程序的图标,名称,版本号和版权按钮的对话框
- Flutter CupertinoFullscreenDialogTransition 全屏对话框 · 全屏对话框
信息展示
- Flutter Text · Text Widget用于显示简单样式文本( 富文本编辑器 Text.rich() )
- Flutter RefreshIndicator · 下拉刷新包装器。
- Flutter Image · 一个显示图片的widget
- Flutter Chip · 标签, 它可以将一个复杂内容实体展现在一个小块中,如联系人
- Flutter ClipXxx 裁剪系列 · ClipOval椭圆剪辑、ClipPath 路径剪辑、ClipRect 矩形剪辑、ClipRRect 圆角矩形
- Flutter Draggable · 拖动小部件
- Flutter DragTarget · 接收拖拽Draggable部件
- Flutter Dismissible · 拖动小部件,常用于listview Item滑动删除
- Flutter DataTable · 数据表显示原始数据集。它们通常出现在桌面企业产品中。DataTable Widget实现这个组件
- Flutter GridView · 网格列表由以垂直和水平布局排列的重复单元格图案组成。GridView小部件实现此组件
- Flutter ListView · ListView是最常用的滚动小部件。它在滚动方向上一个接一个地显示它的子项
- Flutter MediaQuery · 获取屏幕宽度、高度、密度、通知栏高度等屏幕信息
- Flutter Offstage、Visibility · 隐藏/可见 组件
- Flutter Form表单 · 表单提交 演示
- Flutter Animation 动画 · 缩放、颜色渐变、平移、淡入淡出、旋转、改变形状、混合组合
- Flutter CustomScrollView 自定义滚动效果
- Flutter DatePickers & TimePickers · Flutter 时间/日期选择器
- Flutter DateTime日期转换 · 时间戳
- Flutter Accumulator累加器
- Flutter Tooltip · 一个文本提示工具,帮助解释一个按钮或其他用户界面,当widget长时间按下时显示一个提示标签
- Flutter CircularProgressIndicator 进度指示器/Loading
- Flutter ConstrainedBox 约束子组件
Flutter 常用布局
- Flutter Container · 容器、Container属性与特性
- Flutter Paddiing · 内边距组件介绍
- Flutter Row · 行(水平布局) 组件介绍
- Flutter Column · 列(垂直布局) 组件介绍
- Flutter Expanded · 自适应填充、比例填充
- Flutter Stack · Stack层叠组件、tack与Align组合、Stack与Positioned组合定位布局
- Flutter Card · 一个 Material Design 卡片。拥有一个圆角和阴影
- Flutter AspectRatio · 设定组件宽高比
- Flutter Wrap · 可以实现流布局(自动换行)的组件
- Flutter Table · Table 是一个表格布局组件
- Flutter DataTable · 数据表
- Flutter Stepper · 一个Material Design 步骤指示器,显示一系列步骤的过程
- Flutter Divider · 一个逻辑1像素厚的水平分割线,两边都有填充
- Flutter InkWell · 水波纹效果 ,可以给任何组件添加点击
Cupertino (iOS风格) Widgets
- Flutter CupertinoSwitch · IOS风格的开关. 用于单一状态的开/关
- Flutter CupertinoSlider · 从一个范围中选一个值
- Flutter CupertinoDialogAction · 通常用于CupertinoAlertDialog的一个button
- Flutter CupertinoDialog · IOS风格的对话框
- Flutter CupertinoAlertDialog · IOS风格的alert dialog
Flutter 页面路由
- Navigator页面跳转 · Flutter中的普通路由、普通路由传值、命名路由、命名路由传值
- 路由替换(返回到根) · 替换路由、清除路由
- 页面返回传值 · 页面返回传值 (类似与Android里面的OnActivityForResult),接收页面返回数据
扩展
- Toast Demo Flutter Overlay、OverlayState、OverlayEntry 叠加
- Flutter RefreshIndicator 下拉刷新
- VSCode Flutter 打包APK
- Flutter Tween实现抖动效果
- Flutter 与原生交互
- Flutter 通知栏通知
各个布局介绍
Flutter中拥有30多种预定义的布局widget,常用的有Container、Padding、Center、Flex、Row、Colum、ListView、GridView。按照《Flutter技术入门与实战》上面来说的话,大概分为四类
基础布局组件 | |||
Container(容器布局) | Center(居中布局) | Padding(填充布局) | Align(对齐布局) |
FittedBox(缩放布局) | Stack (堆叠布局) | Colum(垂直布局) | Row (水平布局) |
overflowBox(溢出父视图容器) | Expanded(配合Colum,Row使用) | ||
宽高尺寸处理 | |||
SizedBox(设置具体尺寸) | ConstrainedBox(限定最大最小宽高布局) | LimitedBox(限定最大宽高布局) | |
AspectRatio(调整宽高比) | FractionallySizedBox(百分比布局) | ||
列表和表格处理 | |||
ListView(列表) | GridView(网格) | Table(表格) | |
其它布局处理 | |||
Transform(矩阵转换) | Baseline(基准线布局) | Offstage(控制是否显示组件) | Wrap(按宽高自动换行布局) |