Material Components widgets实现了可视化、行为性、动作丰富的widget。
了解更多的widget请参考官方Flutter widget 目录。
App结构和导航
Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。 |
一个Material Design应用程序栏,由工具栏和其他可能的widget(如TabBar和FlexibleSpaceBar)组成。 |
底部导航条,可以很容易地在tap之间切换和浏览顶级视图。
|
一个显示水平选项卡的Material Design widget。 |
TabBarView 显示与当前选中的选项卡相对应的页面视图。通常和TabBar一起使用。 |
一个方便的widget,它封装了应用程序实现Material Design所需要的一些widget。 |
WidgetsApp 一个方便的类,它封装了应用程序通常需要的一些widget。 |
从Scaffold边缘水平滑动以显示应用程序中导航链接的Material Design面板。 |
与CustomScrollView集成的材质设计应用栏。随内容一起滑动的头部 - 滞留头部 |
按钮
Material Design中的button, 一个凸起的材质矩形按钮 |
一个圆形图标按钮,它悬停在内容之上,以展示应用程序中的主要动作。 |
一个扁平的Material按钮
|
一个Material图标按钮,点击时会有水波动画 |
当菜单隐藏式,点击或调用onSelected时显示一个弹出式菜单列表 |
水平排列的按钮组
|
Shows the currently selected item and an arrow that opens a menu for selecting another item. |
输入框和选择框
文本输入框
|
复选框,允许用户从一组中选择多个选项。
|
单选框,允许用户从一组中选择一个选项。
|
On/off 用于切换一个单一状态
|
滑块,允许用户通过滑动滑块来从一系列值中选择。 |
日期&时间选择器
|
对话框、Alert、Panel
简单对话框可以显示附加的提示或操作
官方文档 |
一个会中断用户操作的对话款,需要用户确认 |
BottomSheet是一个从屏幕底部滑起的列表(以显示更多的内容) |
扩展面板,包含一个标题和一个正文,可以展开或者折叠,面板展开,主体可见。 |
具有可选操作的轻量级消息提示,在屏幕的底部显示。 |
是一个包含应用程序的图标,名称,版本号和版权按钮的对话框 |
信息展示
Text Widget用于显示简单样式文本,它包含一些控制文本显示样式的一些属性 |
RefreshIndicator
| |
一个显示图片的widget
|
Icon 材料设计图标。
|
Chip 标签, 它可以将一个复杂内容实体展现在一个小块中,如联系人。 |
Tooltip 一个文本提示工具,帮助解释一个按钮或其他用户界面,当widget长时间按下时显示一个提示标签。 |
数据表显示原始数据集。它们通常出现在桌面企业产品中。DataTable Widget实现这个组件 |
Card 一个 Material Design 卡片。拥有一个圆角和阴影
|
LinearProgressIndicator 一个线性进度条,另外还有一个圆形进度条CircularProgressIndicator
|
CircularProgressIndicator 材料设计循环进度指示器,旋转以指示应用程序正忙。
|
网格列表由以垂直和水平布局排列的重复单元格图案组成。GridView小部件实现此组件。 |
可滚动的线性小部件列表。ListView是最常用的滚动小部件。它在滚动方向上一个接一个地显示它的子项。在横轴中,子项需要填充ListView。 | 获取屏幕宽度、高度、密度、通知栏高度等屏幕信息
|
隐藏/可见 组件
|
布局
一个方便的小部件,它组合了常见的绘画、定位和大小等。 |
内边距组件
|
层叠组件,一个组件可以在另一个组件上面也可以在下面
|
Row 在水平方向上布局子部件列表
|
在垂直方向上布局子部件列表
|
表格布局
|
ListTile 一个固定高度的行,通常包含一些文本,以及一个行前或行尾图标。 |
一个Material Design 步骤指示器,显示一系列步骤的过程 |
一个逻辑1像素厚的水平分割线,两边都有填充 |
扩展行、列或Flex的子元素的小部件。 弹性、自适应、充满剩余 |
Wrap 可以实现流布局,当子元素在一行排列空间不足时,会自动换行排列显示。 | 可将子元素的大小调整到特定的长宽比。 |
Cupertino (iOS风格) Widgets
CupertinoActivityIndicator 一个iOS风格的loading指示器。显示一个圆形的转圈菊花 |
iOS风格的alert dialog.
|
CupertinoButton iOS风格的button.
|
iOS风格的对话框 |
通常用于CupertinoAlertDialog的一个button |
从一个范围中选一个值. |
iOS风格的开关. 用于单一状态的开/关 |
CupertinoPageTransition 提供iOS风格的页面过度动画 |
CupertinoFullscreenDialogTransition 一个iOS风格的,用于调用全屏对话框。 |
CupertinoNavigationBar iOS风格的导航栏. 通常和CupertinoPageScaffold一起使用。 |
CupertinoTabBar iOS风格的底部选项卡。 通常和CupertinoTabScaffold一起使用。 |
CupertinoPageScaffold 一个iOS风格的页面的基本布局结构。 包含内容和导航栏 |
CupertinoTabScaffold 标签式iOS应用程序的结构。将选项卡栏放在内容选项卡之上 |
CupertinoTabView 支持选项卡间并行导航项卡的根内容。通常与CupertinoTabScaffolde一起使用 |
CupertinoTextField iOS风格的文本字段。
|
CupertinoTimerPicker iOS风格的倒数计时器选择器。
|
CupertinoSegmentedControl iOS风格的分段控件。用于在水平列表中选择互斥选项。 |
CupertinoPicker iOS风格的选择器控件。用于选择短列表中的项目。 |
CupertinoDatePicker iOS风格的日期或日期和时间选择器。 |