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 Flutter widget catalog.
App structure and navigation
-
Scaffold
Implements the basic Material Design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.
-
Appbar
A Material Design app bar. An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar.
-
BottomNavigationBar
Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. The BottomNavigationBar widget implements this component.
-
TabBarView
A page view that displays the widget which corresponds to the currently selected tab. Typically used in conjunction with a TabBar.
-
MaterialApp
A convenience widget that wraps a number of widgets that are commonly required for applications implementing Material Design.
-
WidgetsApp
A convenience class that wraps a number of widgets that are commonly required for an application.
-
Drawer
A Material Design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application.
Buttons
-
RaisedButton
A Material Design raised button. A raised button consists of a rectangular piece of material that hovers over the interface.
-
FloatingActionButton
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.
-
FlatButton
A flat button is a section printed on a Material Components widget that reacts to touches by filling with color.
-
IconButton
An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink).
-
PopupMenuButton
Displays a menu when pressed and calls onSelected when the menu is dismissed because an item was selected.
Input and selections
-
TextField
Touching a text field places the cursor and displays the keyboard. The TextField widget implements this component.
-
Checkbox
Checkboxes allow the user to select multiple options from a set. The Checkbox widget implements this component.
-
Radio
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.
-
Switch
On/off switches toggle the state of a single settings option. The Switch widget implements this component.
-
Date & Time Pickers
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.
Dialogs, alerts, and panels
-
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 as adding an account).
-
AlertDialog
Alerts are urgent interruptions requiring acknowledgement that inform the user about a situation. The AlertDialog widget implements this component.
-
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 showModalBottomSheet() to implement a modal bottom sheet.
-
ExpansionPanel
Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.
-
SnackBar
A lightweight message with an optional action which briefly displays at the bottom of the screen.
Information displays
-
Chip
A Material Design chip. Chips represent complex entities in small blocks, such as a contact.
-
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 show a label when the widget long pressed (or when the user takes some other appropriate action).
-
DataTable
Data tables display sets of raw data. They usually appear in desktop enterprise products. The DataTable widget implements this component.
-
LinearProgressIndicator
Progress and activity indicators are visual indications of an app loading content. The LinearProgressIndicator widget implements this component. In addition you may also use the CircularProgressIndicator 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.
Layout
-
ListTile
A single fixed-height row that typically contains some text as well as a leading or trailing icon.
-
Stepper
A Material Design stepper widget that displays progress through a sequence of steps.
See more widgets in the Flutter widget catalog.