material_widgets 0.4.0-preview.9 copy "material_widgets: ^0.4.0-preview.9" to clipboard
material_widgets: ^0.4.0-preview.9 copied to clipboard

Published 3 years ago
[incomplete package analysis]
→

Metadata

An package of widgets conforming to the material design spec.

More...

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.

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.

← Metadata

0
likes
50
points
11
downloads

Publisher

unverified uploader

Weekly Downloads

Metadata

An package of widgets conforming to the material design spec.

Repository (GitHub)
View/report issues

License

BSD-3-Clause (license)

Dependencies

collection, dynamic_color_compat, flutter, flutter_monet_theme, material_you, meta, shape_theme_switcher, smooth_page_indicator

More

Packages that depend on material_widgets

Back