Material 2 组件小部件
Flutter 提供了各种实现 Material 2 设计指南的小部件,让您能够创建直观美观的应用程序。
实现 Material 2 设计指南的小部件。
应用结构和导航
#
在屏幕顶部显示内容和操作的容器。

包含用于一键探索和切换顶级视图的工具的容器。

一个 Material Design 面板,从 Scaffold 边缘水平滑入,以在应用程序中显示导航链接。

一个便捷小部件,它封装了 Material Design 应用程序通常所需的一些小部件。

实现了基本的 Material Design 视觉布局结构。此类提供了用于显示抽屉、SnackBar 和底部工作表的 API。

一个与 CustomScrollView 集成的 Material Design 应用栏。

分层容器,用于组织跨不同屏幕、数据集和其他交互的内容。

一个页面视图,显示与当前选定选项卡对应的小部件。通常与 TabBar 结合使用。

协调 TabBar 和 TabBarView 之间的选项卡选择。

显示一行小圆形指示器,每个选项卡一个。选定选项卡的指示器会高亮显示。通常与 TabBarView 结合使用。

一个便捷类,封装了应用程序通常所需的一些小部件。
按钮
#
显示当前选定的项目以及一个用于打开菜单以选择其他项目的箭头。

一个 Material Design 凸起按钮。一个填充按钮,其材质在按下时会凸起。

包含图标的可点击块,始终将关键操作置于触手可及之处。

触发操作的可点击块。这些更宽的块可以容纳文本标签并提供更大的目标区域。

可点击的图标,提示应用程序用户执行辅助操作。

一个 Material Design 轮廓按钮,本质上是带有轮廓边框的 TextButton。

按下时显示菜单,并在菜单因项目被选中而关闭时调用 onSelected。

一个 Material Design 文本按钮。一个没有边框的简单扁平按钮。
输入和选择
#
表单控件,应用程序用户可以设置或清除以从一组选项中选择一个或多个。

用于选择日期或日期范围的日历界面。

表单控件,应用程序用户可以设置或清除以从一组选项中仅选择一个。

启用选择值范围的表单控件。

将单个项目状态切换为开启或关闭的切换控件。

应用程序用户可以输入文本的框。它们出现在表单和对话框中。
对话框、提醒和面板
#
悬浮容器,提示应用程序用户提供更多数据或做出决定。

底部工作表从屏幕底部滑出,以显示更多内容。您可以调用 showBottomSheet() 来实现一个持久的底部工作表,或者...

扩展面板包含创建流程,并允许对元素进行轻量级编辑。ExpansionPanel 小部件实现了此组件。

简单对话框可以提供有关列表项的更多详细信息或操作。例如,它们可以显示头像图标、澄清副文本或正交操作(例如...

关于应用程序进程的简短消息,显示在屏幕底部。
信息显示
#
用于显示带有圆角和阴影框中的短而相关内容的容器。

简化信息输入、进行选择、内容筛选或触发操作的小块。

旋转以指示应用程序繁忙的圆形进度指示器。

数据表显示原始数据集。它们通常出现在桌面企业产品中。DataTable 小部件实现了此组件。

网格列表由垂直和水平布局中排列的重复单元格模式组成。GridView 小部件实现了此组件。

一个 Material Design 图标。
一个显示图像的小部件。

随着正在进行的过程(例如加载应用程序或提交表单)完成而改变颜色的垂直线。

工具提示提供文本标签,有助于解释按钮或其他用户界面操作的功能。将按钮包裹在 Tooltip 小部件中以...
布局
#
在列表和容器中对内容进行分组的细线。

一个固定的单行高度,通常包含一些文本以及前导或尾随图标。

一个 Material Design 步进器小部件,显示通过一系列步骤的进度。
在组件目录中查找更多组件。