material_design 0.2.0

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.

Material Design

A comprehensive toolkit for implementing Material Design 3 in Flutter. Build beautiful and consistent UIs aligned with official metrics and guidelines using a powerful set of design tokens and ready-to-use helper widgets.

This package encapsulates the Material 3 guidelines into easy-to-use tokens, allowing you to focus on your app logic while maintaining visual fidelity.

Features

• 🎨 Color: Full light and dark color schemes (ColorScheme) generated from a seed color.
• ✒️ Typography: Full M3 type scale with 15 text styles (TextStyle).
• ✨ Shape: ShapeBorder tokens for all corner radius levels.
• 🔳 Shadow: BoxShadow tokens for the 6 M3 elevation levels.
• 📏 Spacing: Granular spacing scale for consistent layouts.
• 📐 Borders: Tokens for standard border widths.
• 💨 Motion: Duration and easing curves for standard and emphasized animations.
• 🔧 And more: Tokens for Breakpoint, Density, Opacity, and Icon Size.

Installation

Add this line to your project's pubspec.yaml file:

dependencies:
  material_design: ^0.2.0

Then run flutter pub get.

Usage

Import the package to start using the tokens:

import 'package:material_design/material_design.dart';

Configuring the Theme

Easily apply Material 3 color schemes to your MaterialApp:

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material 3 App',
      // Use the light theme
      theme: ThemeData(
        colorScheme: MaterialColorSchemes.lightScheme,
        useMaterial3: true,
      ),
      // And the dark theme
      darkTheme: ThemeData(
        colorScheme: MaterialColorSchemes.darkScheme,
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

Applying Tokens

Use tokens in your widgets to ensure consistency.

Text:

Text(
  'Display Large',
  style: MaterialTypeScale.displayLarge,
)

Shapes and Shadows:

Container(
  decoration: ShapeDecoration(
    shape: MaterialShape.medium, // 12dp corner radius
    shadows: MaterialShadow.level2, // 3dp elevation shadow
  ),
)

Spacing:

Padding(
  padding: const EdgeInsets.all(MaterialSpacing.space16), // 16dp padding
  child: Text('Hello, Material!'),
)

Example App

The included example app serves as a complete visual style guide, showcasing all tokens available in this package. Explore it to see the tokens in action.

More content

https://flutterweb-wasm.web.app/