[ Web Proxy ]
URL:
Viewing: https://docs.flutter.dev/ui/widgets/material.md [Back]  [Original]
Material component widgets Skip to main content

docs.flutter.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic.

Learn more OK, got it
Flutter logo [Flutter logo] Flutter Docs
Search:
Get started
  1. UI
  2. Widgets
  3. Material components

Material component widgets

A catalog of Flutter's material component widgets. Visual, behavioral, and motion-rich widgets implementing the Material 3 design specification.

Flutter provides a variety of visual, behavioral, and motion-rich widgets that implement the Material 3 design specification. Material 3 is the default design language of Flutter, enabling you to design and build beautiful, usable apps that can adapt to any platform.

The transition to Material 3 as the default was completed in Flutter 3.16.

To learn more about this transition, how to complete it for your own widgets, or how to temporarily opt-out, check out the Migrate to Material 3 migration guide.

To catch these and other widgets in action, check out the Material 3 demo web app.

Actions

Rendered example of the Common buttons Material widget. [Rendered example of the Common buttons Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
Common buttons

Clickable blocks that start an action, such as sending an email, sharing a document, or liking a comment.

Rendered example of the FloatingActionButton Material widget. [Rendered example of the FloatingActionButton Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
FloatingActionButton

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

Rendered example of the Extended FloatingActionButton Material widget. [Rendered example of the Extended FloatingActionButton Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
Extended FloatingActionButton

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

Rendered example of the IconButton Material widget. [Rendered example of the IconButton Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
IconButton

Clickable icons to prompt app users to take supplementary actions.

Rendered example of the SegmentedButton Material widget. [Rendered example of the SegmentedButton Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
SegmentedButton

Single or multiple selected clickable blocks to help people select options, switch views, or sort elements.

Communication

Rendered example of the Badge Material widget. [Rendered example of the Badge Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
Badge

Icon-like block that conveys dynamic content such as counts or status. It can include labels or numbers.

Rendered example of the LinearProgressIndicator Material widget. [Rendered example of the LinearProgressIndicator Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
LinearProgressIndicator

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

Rendered example of the SnackBar Material widget. [Rendered example of the SnackBar Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
SnackBar

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

Containment

Rendered example of the AlertDialog Material widget. [Rendered example of the AlertDialog Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
AlertDialog

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

Rendered example of the Bottom sheet Material widget. [Rendered example of the Bottom sheet Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
Bottom sheet

Containers that anchor supplementary content to the bottom of the screen.

Rendered example of the Card Material widget. [Rendered example of the Card Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
Card

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

Rendered example of the Divider Material widget. [Rendered example of the Divider Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
Divider

Thin line that groups content in lists and containers.

Rendered example of the ListTile Material widget. [Rendered example of the ListTile Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
ListTile

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

Rendered example of the AppBar Material widget. [Rendered example of the AppBar Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
AppBar

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

Rendered example of the Bottom app bar Material widget. [Rendered example of the Bottom app bar Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
Bottom app bar

Container that displays navigation and key actions at the bottom of a screen.

Rendered example of the NavigationBar Material widget. [Rendered example of the NavigationBar Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
NavigationBar

Persistent container that enables switching between primary destinations in an app.

Rendered example of the NavigationDrawer Material widget. [Rendered example of the NavigationDrawer Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
NavigationDrawer

Container that slides from the leading edge of the app to navigate to other sections in an app.

Rendered example of the Navigation rail Material widget. [Rendered example of the Navigation rail Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
Navigation rail

Persistent container on the leading edge of tablet and desktop screens to navigate to parts of an app.

Rendered example of the TabBar Material widget. [Rendered example of the TabBar Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
TabBar

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

Selection

Rendered example of the Checkbox Material widget. [Rendered example of the Checkbox Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
Checkbox

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

Rendered example of the Chip Material widget. [Rendered example of the Chip Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
Chip

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

Rendered example of the DatePicker Material widget. [Rendered example of the DatePicker Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
DatePicker

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

Rendered example of the Menu Material widget. [Rendered example of the Menu Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
Menu

Container that displays a list of choices on a temporary surface.

Rendered example of the Radio Material widget. [Rendered example of the Radio Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
Radio

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

Rendered example of the Slider Material widget. [Rendered example of the Slider Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
Slider

Form control that enables selecting a range of values.

Rendered example of the Switch Material widget. [Rendered example of the Switch Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
Switch

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

Rendered example of the TimePicker Material widget. [Rendered example of the TimePicker Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
TimePicker

Clock interface used to select and set a specific time.

Text inputs

Rendered example of the TextField Material widget. [Rendered example of the TextField Material widget.]
Decorated background for Material widget visualizations. [Decorated background for Material widget visualizations.]
TextField

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

Find more widgets in the Material 2 widget catalog and other categories of the widget catalog.

Unless stated otherwise, the documentation on this site reflects Flutter 3.44.7. Page last updated on 2026-05-31. Report an issue.

Flutter logo [Flutter logo]
Except as otherwise noted, this site is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the 3-Clause BSD License.
Web Proxy Viewer  |  New URL  |  Original Page