material_widgets 0.4.0-preview.8

An package of widgets conforming to the material design spec.

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

[Light] [Dark]

Styling

Typography

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

Images

[Phone] [Tablet] [Desktop]

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

[Tones] [Schemes] [Schemes (dark)]

Elevation

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

Images

[Level 0] [Level 1] [Level 2] [Level 3] [Level 4]

Components:

Cards

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

Images

[Light] [Dark]

Chips

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

Images

[Light] [Dark]

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

[Light] [Dark]

Dialogs

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

Images

[Basic light] [Basic dark] [Basic light (icon)] [Basic dark (icon)] [Full screen light] [Full screen dark]

Appbars

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

Images

[Light] [Dark]

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

[Light] [Dark]

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

[Light] [Dark]

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	[Regular - Primary_Container]	[Regular - Primary_Container - Lowered]	[Regular - Primary_Container]	[Regular - Primary_Container - Lowered]
surface	[Regular - Surface]	[Regular - Surface - Lowered]	[Regular - Surface]	[Regular - Surface - Lowered]
secondary	[Regular - Secondary]	[Regular - Secondary - Lowered]	[Regular - Secondary]	[Regular - Secondary - Lowered]
tertiary	[Regular - Tertiary]	[Regular - Tertiary - Lowered]	[Regular - Tertiary]	[Regular - Tertiary - Lowered]

Small

Color Scheme	Regular (light)	Lowered (light)	Regular (dark)	Lowered (dark)
primaryContainer	[Small - Primary_Container]	[Small - Primary_Container - Lowered]	[Small - Primary_Container]	[Small - Primary_Container - Lowered]
surface	[Small - Surface]	[Small - Surface - Lowered]	[Small - Surface]	[Small - Surface - Lowered]
secondary	[Small - Secondary]	[Small - Secondary - Lowered]	[Small - Secondary]	[Small - Secondary - Lowered]
tertiary	[Small - Tertiary]	[Small - Tertiary - Lowered]	[Small - Tertiary]	[Small - Tertiary - Lowered]

Large

Color Scheme	Regular (light)	Lowered (light)	Regular (dark)	Lowered (dark)
primaryContainer	[Large - Primary_Container]	[Large - Primary_Container - Lowered]	[Large - Primary_Container]	[Large - Primary_Container - Lowered]
surface	[Large - Surface]	[Large - Surface - Lowered]	[Large - Surface]	[Large - Surface - Lowered]
secondary	[Large - Secondary]	[Large - Secondary - Lowered]	[Large - Secondary]	[Large - Secondary - Lowered]
tertiary	[Large - Tertiary]	[Large - Tertiary - Lowered]	[Large - Tertiary]	[Large - Tertiary - Lowered]

Expanded

Color Scheme	Regular (light)	Lowered (light)	Regular (dark)	Lowered (dark)
primaryContainer	[Expanded (Shown) - Primary_Container]	[Expanded (Shown) - Primary_Container - Lowered]	[Expanded (Shown) - Primary_Container]	[Expanded (Shown) - Primary_Container - Lowered]
surface	[Expanded (Shown) - Surface]	[Expanded (Shown) - Surface - Lowered]	[Expanded (Shown) - Surface]	[Expanded (Shown) - Surface - Lowered]
secondary	[Expanded (Shown) - Secondary]	[Expanded (Shown) - Secondary - Lowered]	[Expanded (Shown) - Secondary]	[Expanded (Shown) - Secondary - Lowered]
tertiary	[Expanded (Shown) - Tertiary]	[Expanded (Shown) - Tertiary - Lowered]	[Expanded (Shown) - Tertiary]	[Expanded (Shown) - Tertiary - Lowered]

Expanded (No icon)

Color Scheme	Regular (light)	Lowered (light)	Regular (dark)	Lowered (dark)
primaryContainer	[Expanded (No icon) - Primary_Container]	[Expanded (No icon) - Primary_Container - Lowered]	[Expanded (No icon) - Primary_Container]	[Expanded (No icon) - Primary_Container - Lowered]
surface	[Expanded (No icon) - Surface]	[Expanded (No icon) - Surface - Lowered]	[Expanded (No icon) - Surface]	[Expanded (No icon) - Surface - Lowered]
secondary	[Expanded (No icon) - Secondary]	[Expanded (No icon) - Secondary - Lowered]	[Expanded (No icon) - Secondary]	[Expanded (No icon) - Secondary - Lowered]
tertiary	[Expanded (No icon) - Tertiary]	[Expanded (No icon) - Tertiary - Lowered]	[Expanded (No icon) - Tertiary]	[Expanded (No icon) - Tertiary - Lowered]

Expanded (Closed)

Color Scheme	Regular (light)	Lowered (light)	Regular (dark)	Lowered (dark)
primaryContainer	[Expanded (Hidden) - Primary_Container]	[Expanded (Hidden) - Primary_Container - Lowered]	[Expanded (Hidden) - Primary_Container]	[Expanded (Hidden) - Primary_Container - Lowered]
surface	[Expanded (Hidden) - Surface]	[Expanded (Hidden) - Surface - Lowered]	[Expanded (Hidden) - Surface]	[Expanded (Hidden) - Surface - Lowered]
secondary	[Expanded (Hidden) - Secondary]	[Expanded (Hidden) - Secondary - Lowered]	[Expanded (Hidden) - Secondary]	[Expanded (Hidden) - Secondary - Lowered]
tertiary	[Expanded (Hidden) - Tertiary]	[Expanded (Hidden) - Tertiary - Lowered]	[Expanded (Hidden) - Tertiary]	[Expanded (Hidden) - Tertiary - Lowered]

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.