material_design 0.1.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

Um kit de ferramentas abrangente para implementar o Material Design 3 no Flutter. Construa UIs bonitas e consistentes, alinhadas com as métricas e diretrizes oficiais, usando um poderoso conjunto de tokens de design e widgets auxiliares prontos para uso.

Este pacote encapsula as diretrizes do Material 3 em tokens fáceis de usar, permitindo que você se concentre na lógica do seu aplicativo enquanto mantém a fidelidade visual.

Funcionalidades

• 🎨 Color: Esquemas de cores claro e escuro completos (ColorScheme) gerados a partir de uma cor semente.
• ✒️ Typography: Escala de tipos completa do M3 com 15 estilos de texto (TextStyle).
• ✨ Shape: Tokens ShapeBorder para todos os níveis de raio de canto.
• 🔳 Shadow: Tokens BoxShadow para os 6 níveis de elevação do M3.
• 📏 Spacing: Escala de espaçamento granular para layouts consistentes.
• 📐 Borders: Tokens para larguras de borda padrão.
• 💨 Motion: Duração e curvas de easing para animações padrão e enfatizadas.
• 🔧 E mais: Tokens para Breakpoint, Density, Opacity, e Icon Size.

Instalação

Adicione esta linha ao arquivo pubspec.yaml do seu projeto:

dependencies:
  material_design: ^0.1.0

Em seguida, execute flutter pub get.

Uso

Importe o pacote para começar a usar os tokens.

import 'package:material_design/material_design.dart';

Configurando o Tema

Aplique facilmente os esquemas de cores do Material 3 ao seu 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 o tema claro
      theme: ThemeData(
        colorScheme: MaterialColorSchemes.lightScheme,
        useMaterial3: true,
      ),
      // E o tema escuro
      darkTheme: ThemeData(
        colorScheme: MaterialColorSchemes.darkScheme,
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

Aplicando Tokens

Use os tokens em seus widgets para garantir consistência.

Texto:

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

Formas e Sombras:

Container(
  decoration: ShapeDecoration(
    color: Theme.of(context).colorScheme.surface,
    shape: MaterialShape.medium, // Raio de 12dp
    shadows: MaterialShadow.level2, // Sombra de elevação de 3dp
  ),
)

Espaçamento:

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

Aplicativo de Exemplo

O aplicativo de exemplo incluído serve como um guia de estilo visual completo, demonstrando todos os tokens disponíveis neste pacote. Explore-o para ver os tokens em ação.