Material Components widgets
Visual, behavioral, and motion-rich widgets implementing the Material Design guidelines.
- App structure and navigation
- Buttons
- Input and selections
- Dialogs, alerts, and panels
- Information displays
- Layout
See more widgets in the widget catalog.
App structure and navigation
![](https://imgs.xnip.cn/cj/docimg/147/849b8c8e-206a-4f6e-a2ad-b19558e04456.png)
Implements the basic Material Design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/f7d00d92-2d2c-4b1f-ae93-eebf6ea6bec3.png)
A Material Design app bar. An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/ed6483d7-7267-4c57-8cd5-7c29d9a299d2.png)
Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. The BottomNavigationBar widget implements this component.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/4258bdce-4b05-4a06-a76d-80eebf319228.png)
A Material Design widget that displays a horizontal row of tabs.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/23d5f38a-ac95-48e1-a5e7-a4ee9a28b7af.png)
A page view that displays the widget which corresponds to the currently selected tab. Typically used in conjunction with a TabBar.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/56c0975b-8a6d-4df1-874b-acdd65fa68d0.png)
A convenience widget that wraps a number of widgets that are commonly required for applications implementing Material Design.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/01785795-9e72-4646-ac27-3b7aac16130f.png)
A convenience class that wraps a number of widgets that are commonly required for an application.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/2288d5c5-9d2f-4667-a0b2-53857fd4e8f8.png)
A Material Design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/c9e62af1-b945-4eb0-9498-86a6fb40faf7.png)
A material design app bar that integrates with a CustomScrollView.
DocumentationButtons
![](https://imgs.xnip.cn/cj/docimg/147/591b25d0-617b-4d87-8efc-af3af718bb16.png)
A Material Design raised button. A raised button consists of a rectangular piece of material that hovers over the interface.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/247ff450-efd5-4aa8-b220-bd4c1f703355.png)
A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.floatingActionButton field.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/893e0aa9-b64d-4fb9-8a71-b4eba9b82426.png)
A flat button is a section printed on a Material Components widget that reacts to touches by filling with color.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/bd31e9a9-1ad4-4699-8239-60034b928435.png)
An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink).
Documentation![](https://imgs.xnip.cn/cj/docimg/147/662326f6-6e19-4396-8391-ab0e536ef94d.png)
Shows the currently selected item and an arrow that opens a menu for selecting another item.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/16bdd544-bdbf-42b1-a1d8-a8f1398e9901.png)
Displays a menu when pressed and calls onSelected when the menu is dismissed because an item was selected.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/49048eba-b867-43f8-b475-a368015293b2.png)
A horizontal arrangement of buttons.
DocumentationInput and selections
![](https://imgs.xnip.cn/cj/docimg/147/06e16064-f4b0-478c-b50c-a9a6d33e1078.png)
Touching a text field places the cursor and displays the keyboard. The TextField widget implements this component.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/e90f8793-50e8-49fb-a408-f3d0feb0160f.png)
Checkboxes allow the user to select multiple options from a set. The Checkbox widget implements this component.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/254a95e4-3cc8-4eb9-a8b9-9d8489e6ebb0.png)
Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/9de7b94f-0f15-410e-962b-306d5aaf0d5b.png)
On/off switches toggle the state of a single settings option. The Switch widget implements this component.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/1a98acbd-6d14-4179-9087-4de84899b798.png)
Sliders let users select from a range of values by moving the slider thumb.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/055da708-9ef6-40d8-8ca4-a1929d06dd43.png)
Date pickers use a dialog window to select a single date on mobile. Time pickers use a dialog to select a single time (in the hours:minutes format) on mobile.
DocumentationDialogs, alerts, and panels
![](https://imgs.xnip.cn/cj/docimg/147/f18905e0-87c8-439c-87c4-b646840fd9ac.png)
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 as adding an account).
Documentation![](https://imgs.xnip.cn/cj/docimg/147/3692da35-6ff5-42af-9571-33c5ccc1fcbc.png)
Alerts are urgent interruptions requiring acknowledgement that inform the user about a situation. The AlertDialog widget implements this component.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/233d82d6-4b4a-4fa6-b5b2-9894ce128108.png)
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 showModalBottomSheet() to implement a modal bottom sheet.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/673ed424-7a07-4295-a522-587b06b79960.png)
Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/54d7c128-d4e8-4f36-8f20-c3d599813e5c.png)
A lightweight message with an optional action which briefly displays at the bottom of the screen.
DocumentationInformation displays
A widget that displays an image.
Documentation![](https://imgs.xnip.cn/cj/docimg/147/edf8ec4b-d96a-4d4c-877b-74c6a496b6a7.png)
A Material Design icon.
Documentation