An Flutter package implementing various Material Design 3 components and layout patterns. It uses my material_you, flutter_monet_theme, monet_theme and palette_from_wallpaper packages in order to implement the MD3 theming, and builds on top of them to implement the MD3 components.
The Material Design 3 Gallery contains every component from this package and is available through an release APK on the Releases page, or through the web Here.
An fully device-type aware implementation of the Material Design 3 Typography
An fully fledged implementation of the Material Design 3 Color System. It supports an baseline theme, wallpaper-based seeded themes, themes from custom seeds, and custom harmonized colors
An fully fledged implementation of the Material Design 3 Elevation, with 5 different levels, each with an different shadow and surface tint.
Some components which follow the Material Design 3 spec for the Cards, and an extra ColoredCard.
Some components which follow the Material Design 3 spec for the Chips.
An style for Elevated, Text and Outlined buttons, and Filled and FiledTonal buttons which follow the Material Design 3 spec for the Common Buttons.
Basic and fullscreen dialogs and animations which follow the Material Design 3 spec for the Dialogs.
Various appbars and an sliver appbar which follow the Material Design 3 spec for the Top app bar.
An guesstimate of what the Material Design 3 switch component will look like (Based of the measures and eyeballing from the Google Clock app).
An guesstimate of what the Material Design 3 slider component will look like (Based of the eyeballing of the Material You advertising videos).
An component which follows the Material Design 3 spec for the FAB and Extended FAB components.
| Color Scheme | Regular (light) | Lowered (light) | Regular (dark) | Lowered (dark) |
|---|---|---|---|---|
| primaryContainer |  |
 |
 |
 |
| surface |  |
 |
 |
 |
| secondary |  |
 |
 |
 |
| tertiary |  |
 |
 |
 |
| Color Scheme | Regular (light) | Lowered (light) | Regular (dark) | Lowered (dark) |
|---|---|---|---|---|
| primaryContainer |  |
 |
 |
 |
| surface |  |
 |
 |
 |
| secondary |  |
 |
 |
 |
| tertiary |  |
 |
 |
 |
| Color Scheme | Regular (light) | Lowered (light) | Regular (dark) | Lowered (dark) |
|---|---|---|---|---|
| primaryContainer |  |
 |
 |
 |
| surface |  |
 |
 |
 |
| secondary |  |
 |
 |
 |
| tertiary |  |
 |
 |
 |
| Color Scheme | Regular (light) | Lowered (light) | Regular (dark) | Lowered (dark) |
|---|---|---|---|---|
| primaryContainer | _Primary_Container.png) |
_Primary_Container_Lowered.png) |
_Primary_Container.png) |
_Primary_Container_Lowered.png) |
| surface | _Surface.png) |
_Surface_Lowered.png) |
_Surface.png) |
_Surface_Lowered.png) |
| secondary | _Secondary.png) |
_Secondary_Lowered.png) |
_Secondary.png) |
_Secondary_Lowered.png) |
| tertiary | _Tertiary.png) |
_Tertiary_Lowered.png) |
_Tertiary.png) |
_Tertiary_Lowered.png) |
| Color Scheme | Regular (light) | Lowered (light) | Regular (dark) | Lowered (dark) |
|---|---|---|---|---|
| primaryContainer | _Primary_Container.png) |
_Primary_Container_Lowered.png) |
_Primary_Container.png) |
_Primary_Container_Lowered.png) |
| surface | _Surface.png) |
_Surface_Lowered.png) |
_Surface.png) |
_Surface_Lowered.png) |
| secondary | _Secondary.png) |
_Secondary_Lowered.png) |
_Secondary.png) |
_Secondary_Lowered.png) |
| tertiary | _Tertiary.png) |
_Tertiary_Lowered.png) |
_Tertiary.png) |
_Tertiary_Lowered.png) |
| Color Scheme | Regular (light) | Lowered (light) | Regular (dark) | Lowered (dark) |
|---|---|---|---|---|
| primaryContainer | _Primary_Container.png) |
_Primary_Container_Lowered.png) |
_Primary_Container.png) |
_Primary_Container_Lowered.png) |
| surface | _Surface.png) |
_Surface_Lowered.png) |
_Surface.png) |
_Surface_Lowered.png) |
| secondary | _Secondary.png) |
_Secondary_Lowered.png) |
_Secondary.png) |
_Secondary_Lowered.png) |
| tertiary | _Tertiary.png) |
_Tertiary_Lowered.png) |
_Tertiary.png) |
_Tertiary_Lowered.png) |
This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.