material_design 0.7.0
material_design: ^0.7.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.7.0 #
BREAKING CHANGES #
- Tokens: The Material 3 token system has been completely refactored for better organization and clarity.
- System tokens are now organized under
lib/src/m3/tokens/sys/. This includesColor,Elevation,Motion,Shape,Spacing, andTypography. - Many token files have been moved, renamed, or consolidated. Please refer to the updated documentation for the new token structure.
- The
M3Themeclass has been removed as part of this refactoring.
- System tokens are now organized under
Features #
- Components: Added a new Material 3 Button component (
M3CompButton). - Tokens: Introduced new system tokens for
Elevation,Motion,Shape,Spacing, andStateLayerOpacity.
Refactor #
- Refactored the entire token system to align more closely with the official Material Design 3 specifications.
- Renamed and moved several internal utilities and classes to a new
mt(Material Toolkit) namespace for better internal structure. - Updated the example application to reflect all the latest changes and new APIs.
- Renamed the "Density" showcase page to "Visual Density" for clarity.
Chores #
- Updated
.gitignoreto exclude new generated files. - Updated
README.mdwith the latest information.
0.6.2 #
Major Refactoring: Token System Overhaul #
- Shape System: Replaced
BoxDecorationwithShapeDecorationacross the example app for better semantics. IntroducedM3BorderRadiusand convertedM3RadiusfromdoubletoRadiusconstants, providing a more robust and type-safe way to define shapes. - Motion Tokens: Consolidated motion-related tokens.
M3MotionDurationandM3MotionEasinghave been merged into a single, more organizedm3_motion.dartfile under thesysdirectory, improving clarity and discoverability. - File Structure: Reorganized the token file structure to better align with the Material Design 3 system. Legacy and unused token files like
M3ColorRoles,m3_radius.dart(the olddoublebased one), andm3_examples.darthave been removed to streamline the package.
Breaking Changes #
- Removed
M3ColorRoles: The staticM3ColorRolesclass has been removed. Please use the color scheme provided by theM3ThemeorTheme.of(context).colorSchemefor semantic color access. - Removed
M3Radius(asdouble): TheM3Radiusclass that provideddoublevalues has been replaced byM3BorderRadius(which providesBorderRadiusobjects) and a newM3Radiusclass that providesRadiusobjects. - Consolidated Motion Tokens:
M3MotionDurationandM3MotionEasingare no longer separate files. Importpackage:material_design/material_design.dartand use theM3MotionDurationandM3MotionEasingclasses directly.
Enhancements & Fixes #
- Code Cleanup: Performed a general code cleanup, removing obsolete files and refactoring the example app for better readability and consistency.
- Shape Implementation: Consistently replaced
BorderRadius.circular()with the newM3BorderRadiusconstants throughout the example app. - New
mdModule: Introduced a newmdmodule for future development, starting with a new barrel filemd.dart.
0.6.1 #
Refinements and Internationalization #
- Refactored README: Simplified the documentation to focus on core features and improve clarity.
- Internationalized Example App: All user-facing strings in the accessibility showcase are now in English, making the example more accessible to a global audience.
- Code Cleanup: Minor code cleanup and refactoring in the example app for better readability and maintenance.
0.6.0 #
New Features #
- Complete M3 Theme System: Introduced
M3Theme, an integrated theme builder that generates a completeThemeDatafrom a seed color, with full support for light, dark, and high-contrast modes. - Comprehensive Accessibility Utilities: Added the
M3Accessibilityclass, providing a suite of tools for building WCAG-compliant UIs, including accessible form fields, focus indicators, contrast checking, and touch target enforcement. - Adaptive Design System: Implemented the
M3Adaptiveclass with helpers for responsive layouts (M3Adaptive.responsiveLayout), adaptive navigation (M3AdaptiveScaffold), and adaptive components that adjust to different screen sizes and platforms. - Advanced Token Utilities: Added new utility classes for enhanced token functionality:
M3TypeScale: Responsive and accessible typography helpers.M3ColorUtils: Color manipulation and contrast validation.M3ShapeUtils: Responsive and brand-specific shape generation.M3MotionUtils: Contextual animation patterns (fade, slide, scale).
Breaking Changes #
- Token Architecture Refactor: The entire token system has been restructured to follow the official Material Design 3 hierarchy:
- Reference Tokens (Ref): Foundational values (e.g.,
M3RefPalette,M3RefDuration). - System Tokens (Sys): Semantic roles (e.g.,
M3SysColor). - Component Tokens (Comp): Component-specific values (e.g.,
M3CompButton).
- Reference Tokens (Ref): Foundational values (e.g.,
- The old token structure is now considered legacy and will be deprecated in a future version.
Enhancements & Fixes #
- Example App Overhaul: The example app has been completely reorganized into
Foundations,Styles, andComponentssections to provide a comprehensive showcase of all new features and the new token architecture. - Documentation: Massively updated
README.mdand addedENHANCED_FEATURES.mdto document the new capabilities. - Code Quality: Refactored numerous widgets and classes for better organization, consistency, and adherence to M3 specifications.
0.5.1 #
- BREAKING: Renamed
M3MarginstoM3MarginandM3SpacerstoM3Spacerfor better naming consistency. - DOCS: Updated
README.mdto reflect the new class names and provide clearer examples. - CHORE: Updated the example app to use the new
M3MarginandM3Spacerclasses.
0.5.0 #
- BREAKING: Token classes are now
abstract classinstead ofabstract final classto allow for extension. - BREAKING: Change dart version from
3.8.1to>=2.17.0 <4.0.0to allow for extension. - BREAKING: The
equatabledependency has been removed. - FEAT: Added
M3MarginsandM3Spacersclasses for more semantic layout spacing. - FEAT: Added new radius and shape tokens (
largeIncreased,extraLargeIncreased,extraExtraLarge). - FEAT: The example app has been revamped to better demonstrate the updated tokens, including a new
LaunchURLTextwidget. - CHORE: Lowered the minimum Dart SDK requirement from
3.8.1to2.17.0for wider project compatibility. - CHORE: As restrições do SDK do Flutter e do Dart foram atualizadas.
- CHORE:
very_good_analysishas been commented out inanalysis_options.yaml. - DOCS:
README.mdhas been updated with the latest changes.
0.4.1 #
- BREAKING: Renamed
M3OpacitytoM3StateLayerOpacityto better reflect its purpose. - feat: Added
LaunchURLTextwidget to the example app for styled URL links. - feat: Added
M3StateLayerOpacityButtonExampleto demonstrate state layer opacity on a custom button. - refactor: Updated the example app to consistently use
Theme.of(context).textThemefor typography. - docs: Updated
README.mdwith the latest changes and examples.
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.