material_design 0.4.0
material_design: ^0.4.0 copied to clipboard
The fastest path to consistent Material Design UIs in Flutter. Build beautiful apps aligned with official metrics and guidelines using a powerful set of ready-to-use design tokens and helper widgets.
Changelog #
All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.
0.4.0 #
- BREAKING:
M3Motionhas been refactored intoM3MotionDurationandM3MotionEasingto better align with the Material Design 3 specifications. - BREAKING:
M3Densityhas been removed and replaced withM3VisualDensity, which uses Flutter's nativeVisualDensityclass. - FEAT: Added new icon sizes:
dense,medium,large, andextraLargetoM3IconSize. - FEAT: The
M3Shadowimplementation has been revised, including a newfromElevationmethod. - FEAT: Added the
url_launcherdependency for opening URLs. - FIX: The Z-Index section on the example page has been reworked for a better visual demonstration.
- CHORE: Various formatting and code cleanup improvements in the example app.
0.3.0 #
- Breaking Change: Renamed all tokens from
Material*toM3*(e.g.,MaterialTonalColortoM3TonalColor) to align with Material Design 3 naming conventions and avoid conflicts with Flutter'sMaterialclass. - Breaking Change: Reorganized the file structure by moving all token files to
lib/src/m3/tokens/and renaming them with them3_prefix (e.g.,motion.darttom3_motion.dart). This improves clarity and consistency. - Feat: Implemented a responsive layout in the example app using
NavigationRailandNavigationDrawerto showcase theM3Breakpointtoken. - Fix: Updated the copyright year in the
LICENSEfile. - Chore: Updated
pubspec.yamlby removing thehomepagefield and addingissue_tracker.
0.2.6 #
- Feat: Added
MaterialDensitytoken to control UI density. - Refactor: Replaced
MaterialColorScheme.createwithColorScheme.fromSeedto align with Flutter's core API. - Refactor: Refined motion tokens by separating them into
MotionEasingandMotionDurationfor more granular control. - Example: Added a new
DensityPageto the example app to showcase theMaterialDensitytoken. - Example: Updated the example app to use the new motion tokens and
ColorScheme.fromSeed.
0.2.5 #
- Refactor: The
MaterialMotionTokenhas been renamed toMotionSchemeto better align with the Material Design 3 specifications. - Feature: Introduced
MotionDurationsandMotionEasingsclasses to provide more granular control over animation durations and easing curves. - Example: Simplified the elevation page logic and updated the motion page to use the new
MotionScheme.
0.2.4 #
- Refactor: Renamed
MaterialSurfacetoMaterialTonalColorand its methodgetTintedColortofromElevationfor better alignment with Material Design 3 terminology, where tonal colors are applied based on surface elevation. - Refactor: Renamed
MaterialColorSchemestoMaterialColorSchemeto maintain consistency with Flutter'sColorScheme. - Feat: Added detailed comments to
MaterialBreakpointexplaining the different breakpoint values based on the Material Design 3 guidelines. - Feat: Added
allLevelstoMaterialElevation, providing a convenient list of all elevation levels. - Fix: Ignored
.vscode/and.envfiles in.gitignoreto avoid committing editor-specific settings and environment variables. - Example: Updated the example app to use
MaterialTonalColor.fromElevationand other related changes.
0.2.3 #
- Docs: Added detailed examples to
README.mdforMaterialBorder,MaterialOpacity,MaterialBreakpoint,MaterialIconSize, andMaterialZIndex. - Example: Added a new
MotionPageto the example app to showcase allMaterialMotiontokens. - Example: Updated the
OtherTokensPagein the example app to include showcases forMaterialBreakpoint,MaterialIconSize, andMaterialZIndex. - Refactor: Renamed
MotionTokentoMaterialMotionTokenfor better clarity and consistency. - Fix: Removed
MaterialBorder.noneas it was redundant (equivalent to0).
0.2.1 #
Changed #
- Renamed
MaterialColorSchemestoMaterialColorScheme. - Removed static schemes
lightSchemeanddarkScheme; use thecreate()method instead.
0.2.0 #
Added #
MaterialSurfaceUtility: Introduced a new utility class with agetTintedColor()method to easily apply Material 3 surface tint based on elevation. This encapsulates theElevationOverlaylogic into a clean, reusable token.
0.1.0 #
Added #
- Complete Material 3 Token System:
MaterialColorSchemes: Light and dark color schemes generated from a seed color.MaterialTypeScale: Full set of 15 M3 text styles (Display, Headline, Title, Body, Label).MaterialShape:ShapeBordertokens for all M3 corner radius levels.MaterialShadow:BoxShadowtokens aligned with the 6 elevation levels of M3.MaterialBorder: Tokens for border widths.
- Style Guide Example: The example app was completely rewritten to serve as a visual style guide for all tokens.
- Barrel Files: Added barrel files for easy token import by category (
color,typography,geometry, etc.).
Changed #
- Refactored
MaterialOpacity: Aligned with M3 state layer values (Hover, Focus, Press, Drag) and disabled opacities. - Refactored
MaterialRadius: Values adjusted to match the M3 corner radius token scale. - Refactored
MaterialIconSize: Simplified to focus on the default 24dp size, with guidance for contextual usage. - Refactored
motion.dart: FixedasTweenreturn type toAnimatable<T>to ensure proper typing.