Material Components widgets

Visual, behavioral, and motion-rich widgets implementing the Material 3 design specification.

Material 3 becomes the default Flutter interface in late 2023. To learn more about this transition, check out Flutter support for Material 3.

To opt into Material 3, set the useMaterial3 flag to true in your theme.

To catch these widgets in action, check out our live Material 3 demo app.

You can still check out our legacy Material 2 widgets over at their catalog page.

Actions

Common buttons

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

FAB

Clickable block that triggers a key action. This block contains an icon and floats in the app interface to keep the key action within reach....

Extended FAB

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

Icon button

Clickable icons to prompt app users to take supplementary actions.

Segmented button

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

Communication

Badge

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

Progress indicator

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

Snackbar

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

Containment

Bottom sheet

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

Card

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

Dialog

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

Divider

Thin line that groups content in lists and containers.

List

Continuous, vertical indexes that display text or images.

App bar

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

Bottom app bar

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

Navigation bar

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

Navigation drawer

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

Navigation rail

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

Tab bar

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

Selection

Checkbox

Form control that app users can select or clear to select one or more options from a set. Select the option to enable it or...

Chip

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

Date picker

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

Menu

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

Radio button

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

Slider

Form control that enables selecting a range of values.

Switch

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

Time picker

Clock interface used to select and set a specific time.

Text Inputs

Text field

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

Check out more widgets in the widget catalog.