Material Design Widgets

Visual, behavioral, and motion-rich widgets implementing Google’s Material Design guidelines.

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.

    Documentation

  • Appbar

    A material design app bar. An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar.

    Documentation

  • 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.

    Documentation

  • TabBar

    A material design widget that displays a horizontal row of tabs.

    Documentation

  • TabBarView

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

    Documentation

  • MaterialApp

    A convenience widget that wraps a number of widgets that are commonly required for material design applications.

    Documentation

  • WidgetsApp

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

    Documentation

  • Drawer

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

    Documentation

Buttons

  • RaisedButton

    A material design raised button. A raised button consists of a rectangular piece of material that hovers over the interface.

    Documentation

  • 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.

    Documentation

  • FlatButton

    A flat button is a section printed on a Material widget that reacts to touches by filling with color.

    Documentation

  • IconButton

    An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink).

    Documentation

  • PopupMenuButton

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

    Documentation

  • ButtonBar

    A horizontal arrangement of buttons.

    Documentation

Input and selections

  • TextField

    Touching a text field places the cursor and displays the keyboard. The TextField widget implements this component.

    Documentation

  • Checkbox

    Checkboxes allow the user to select multiple options from a set. The Checkbox widget implements this component.

    Documentation

  • 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.

    Documentation

  • Switch

    On/off switches toggle the state of a single settings option. The Switch widget implements this component.

    Documentation

  • Slider

    Sliders let users select from a range of values by moving the slider thumb.

    Documentation

  • 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.

    Documentation

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).

    Documentation

  • AlertDialog

    Alerts are urgent interruptions requiring acknowledgement that inform the user about a situation. The AlertDialog widget implements this component.

    Documentation

  • 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.

    Documentation

  • ExpansionPanel

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

    Documentation

  • SnackBar

    A lightweight message with an optional action which briefly displays at the bottom of the screen.

    Documentation

Information displays

  • Image

    A widget that displays an image.

    Documentation

  • Icon

    A material design icon.

    Documentation

  • Chip

    A material design chip. Chips represent complex entities in small blocks, such as a contact.

    Documentation

  • 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).

    Documentation

  • DataTable

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

    Documentation

  • Card

    A material design card. A card has slightly rounded corners and a shadow.

    Documentation

  • 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.

    Documentation

  • GridView

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

    Documentation

Layout

  • ListTile

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

    Documentation

  • Stepper

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

    Documentation

  • Divider

    A one logical pixel thick horizontal line, with padding on either side.

    Documentation

See more widgets in the Flutter widget catalog.