material_widgets

Description:

material widgets

material_widgets #
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.
Gallery #
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.
Screenshots #


Styling #
Typography #
An fully device-type aware implementation of the Material Design 3 Typography
Images



Color system #
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
Images



Elevation #
An fully fledged implementation of the Material Design 3 Elevation, with 5 different levels, each with an different shadow and surface tint.
Images





Components: #
Cards #
Some components which follow the Material Design 3 spec
for the Cards, and an extra ColoredCard.
Images


Chips #
Some components which follow the Material Design 3 spec
for the Chips.
Images


Common Buttons #
An style for Elevated, Text and Outlined buttons, and Filled and FiledTonal buttons which follow the Material Design 3 spec
for the Common Buttons.
Images


Dialogs #
Basic and fullscreen dialogs and animations which follow the Material Design 3 spec
for the Dialogs.
Images






Appbars #
Various appbars and an sliver appbar which follow the Material Design 3 spec
for the Top app bar.
Images


Switch #
An guesstimate of what the Material Design 3 switch component will look like (Based of the measures and eyeballing from the Google Clock app).
Images


Slider #
An guesstimate of what the Material Design 3 slider component will look like (Based of the eyeballing of the Material You advertising videos).
Images


MD3FloatingActionButton #
An component which follows the Material Design 3 spec
for the FAB and
Extended FAB components.
Images
Regular



Color Scheme
Regular (light)
Lowered (light)
Regular (dark)
Lowered (dark)




primaryContainer






surface






secondary






tertiary







Small



Color Scheme
Regular (light)
Lowered (light)
Regular (dark)
Lowered (dark)




primaryContainer






surface






secondary






tertiary







Large



Color Scheme
Regular (light)
Lowered (light)
Regular (dark)
Lowered (dark)




primaryContainer






surface






secondary






tertiary







Expanded



Color Scheme
Regular (light)
Lowered (light)
Regular (dark)
Lowered (dark)




primaryContainer






surface






secondary






tertiary







Expanded (No icon)



Color Scheme
Regular (light)
Lowered (light)
Regular (dark)
Lowered (dark)




primaryContainer






surface






secondary






tertiary







Expanded (Closed)



Color Scheme
Regular (light)
Lowered (light)
Regular (dark)
Lowered (dark)




primaryContainer






surface






secondary






tertiary







Getting Started #
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.