Material 2 component widgets

Flutter provides a variety of widgets that implement the Material 2 design guidelines, enabling you to create intuitive and beautiful apps.

Widgets implementing the Material 2 design guidelines.

App structure and navigation

#
Rendered image or visualization of the AppBar widget.
AppBar

Container that displays content and actions at the top of a screen.

Rendered image or visualization of the BottomNavigationBar widget.
BottomNavigationBar

Container that includes tools to explore and switch between top-level views in a single tap.

Rendered image or visualization of the Drawer widget.
Drawer

A Material Design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application.

Rendered image or visualization of the MaterialApp widget.
MaterialApp

A convenience widget that wraps a number of widgets that are commonly required for applications implementing Material Design.

Rendered image or visualization of the Scaffold widget.
Scaffold

Implements the basic Material Design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.

Rendered image or visualization of the SliverAppBar widget.
SliverAppBar

A material design app bar that integrates with a CustomScrollView.

Rendered image or visualization of the TabBar widget.
TabBar

Layered containers that organize content across different screens, data sets, and other interactions.

Rendered image or visualization of the TabBarView widget.
TabBarView

A page view that displays the widget which corresponds to the currently selected tab. Typically used in conjunction with a TabBar.

Rendered image or visualization of the TabController widget.
TabController

Coordinates tab selection between a TabBar and a TabBarView.

Rendered image or visualization of the TabPageSelector widget.
TabPageSelector

Displays a row of small circular indicators, one per tab. The selected tab's indicator is highlighted. Often used in conjunction with a TabBarView.

Rendered image or visualization of the WidgetsApp widget.
WidgetsApp

A convenience class that wraps a number of widgets that are commonly required for an application.

Buttons

#
Rendered image or visualization of the DropdownButton widget.
DropdownButton

Shows the currently selected item and an arrow that opens a menu for selecting another item.

Rendered image or visualization of the ElevatedButton widget.
ElevatedButton

A Material Design elevated button. A filled button whose material elevates when pressed.

Rendered image or visualization of the FloatingActionButton widget.
FloatingActionButton

Clickable block containing an icon that keeps a key action always in reach.

Rendered image or visualization of the Extended FloatingActionButton widget.
Extended FloatingActionButton

Clickable block that triggers an action. These wider blocks can fit a text label and provide a larger target area.

Rendered image or visualization of the IconButton widget.
IconButton

Clickable icons to prompt app users to take supplementary actions.

Rendered image or visualization of the OutlinedButton widget.
OutlinedButton

A Material Design outlined button, essentially a TextButton with an outlined border.

Rendered image or visualization of the PopupMenuButton widget.
PopupMenuButton

Displays a menu when pressed and calls onSelected when the menu is dismissed because an item was selected.

Rendered image or visualization of the TextButton widget.
TextButton

A Material Design text button. A simple flat button without a border outline.

Input and selections

#
Rendered image or visualization of the Checkbox widget.
Checkbox

Form control that app users can set or clear to select one or more options from a set.

Rendered image or visualization of the DatePicker widget.
DatePicker

Calendar interface used to select a date or a range of dates.

Rendered image or visualization of the Radio widget.
Radio

Form control that app users can set or clear to select only one option from a set.

Rendered image or visualization of the Slider widget.
Slider

Form control that enables selecting a range of values.

Rendered image or visualization of the Switch widget.
Switch

Toggle control that changes the state of a single item to on or off.

Rendered image or visualization of the TextField widget.
TextField

Box into which app users can enter text. They appear in forms and dialogs.

Dialogs, alerts, and panels

#
Rendered image or visualization of the AlertDialog widget.
AlertDialog

Hovering containers that prompt app users to provide more data or make a decision.

Rendered image or visualization of the BottomSheet widget.
BottomSheet

Bottom sheets slide up from the bottom of the screen to reveal more content. You can call showBottomSheet() to implement a persistent bottom sheet or...

Rendered image or visualization of the ExpansionPanel widget.
ExpansionPanel

Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.

Rendered image or visualization of the SimpleDialog widget.
SimpleDialog

Simple dialogs can provide additional details or actions about a list item. For example they can display avatars icons clarifying subtext or orthogonal actions (such...

Rendered image or visualization of the SnackBar widget.
SnackBar

Brief messages about app processes that display at the bottom of the screen.

Information displays

#
Rendered image or visualization of the Card widget.
Card

Container for short, related pieces of content displayed in a box with rounded corners and a drop shadow.

Rendered image or visualization of the Chip widget.
Chip

Small blocks that simplify entering information, making selections, filtering content, or triggering actions.

Rendered image or visualization of the CircularProgressIndicator widget.
CircularProgressIndicator

Circular progress indicator that spins to indicate a busy application.

Rendered image or visualization of the DataTable widget.
DataTable

Data tables display sets of raw data. They usually appear in desktop enterprise products. The DataTable widget implements this component.

Rendered image or visualization of the GridView widget.
GridView

A grid list consists of a repeated pattern of cells arrayed in a vertical and horizontal layout. The GridView widget implements this component.

Rendered image or visualization of the Icon widget.
Icon

A Material Design icon.

Image

A widget that displays an image.

Rendered image or visualization of the LinearProgressIndicator widget.
LinearProgressIndicator

Vertical line that changes color as an ongoing process, such as loading an app or submitting a form, completes.

Rendered image or visualization of the Tooltip widget.
Tooltip

Tooltips provide text labels that help explain the function of a button or other user interface action. Wrap the button in a Tooltip widget to...

Layout

#
Rendered image or visualization of the Divider widget.
Divider

Thin line that groups content in lists and containers.

Rendered image or visualization of the ListTile widget.
ListTile

A single fixed-height row that typically contains some text as well as a leading or trailing icon.

Rendered image or visualization of the Stepper widget.
Stepper

A Material Design stepper widget that displays progress through a sequence of steps.

Find more widgets in the widget catalog.