Material Components widgets

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

Material 3 is the default Flutter interface as of Flutter 3.16. To learn more about this transition, check out Flutter support for Material 3.

Eventually, Material 2 will be deprecated, but in the short term, you can opt out of Material 3 by setting the useMaterial3 flag to false in your theme.

To migrate your widgets to Material 3, check out the migration guide.

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.


Common buttons

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


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

Extended FloatingActionButton

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


Clickable icons to prompt app users to take supplementary actions.


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



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


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


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



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

Bottom sheet

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


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


Thin line that groups content in lists and containers.


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


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.


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


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

Navigation rail

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


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



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


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


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


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


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


Form control that enables selecting a range of values.


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


Clock interface used to select and set a specific time.

Text Inputs


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

Check out more widgets in the widget catalog.