Atomix Design Flutter

pub package License: MIT

A modern, scalable Design System for Flutter built with Atomic Design principles and powered by Material Design 3. Atomix provides a comprehensive set of reusable components with consistent styling, theming, and interactive documentation.

✨ Features

  • 🎨 Material 3 Foundation - Built on top of Flutter's Material Design 3
  • ⚛️ Atomic Design Architecture - Organized into Atoms, Molecules, and Organisms
  • 🌓 Light & Dark Themes - Full support for both themes with seamless switching
  • 🎯 Design Tokens - Consistent colors, spacing, typography, radius, and elevation
  • 📦 13 Components - Production-ready, customizable components
  • 🧪 Tested - Comprehensive test coverage
  • 📚 Well Documented - Complete DartDoc for all public APIs

📦 Installation

Add to your pubspec.yaml:

dependencies:
  atomix_design_flutter: ^0.1.0

Then run:

flutter pub get

🚀 Quick Start

1. Apply the Theme

import 'package:flutter/material.dart';
import 'package:atomix_design_flutter/atomix_design_flutter.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: AtomixTheme.light(),
      darkTheme: AtomixTheme.dark(),
      themeMode: ThemeMode.system,
      home: const HomePage(),
    );
  }
}

2. Use Components

import 'package:atomix_design_flutter/atomix_design_flutter.dart';

// Use design tokens
Container(
  padding: const EdgeInsets.all(AtomixSpacing.md),
  decoration: BoxDecoration(
    color: AtomixColors.primary,
    borderRadius: AtomixRadius.mdBorderRadius,
  ),
)

// Use components
AtomixButton(
  label: 'Click Me',
  onPressed: () {},
  variant: AtomixButtonVariant.primary,
)

AtomixTextField(
  label: 'Email',
  hint: 'Enter your email',
  prefixIcon: Icons.email,
)

AtomixCard(
  variant: AtomixCardVariant.elevated,
  child: Padding(
    padding: const EdgeInsets.all(AtomixSpacing.lg),
    child: Text('Card content'),
  ),
)

📚 Components

Foundation (Design Tokens)

  • AtomixColors - Semantic color palette
  • AtomixSpacing - 4px-based spacing scale
  • AtomixRadius - Border radius values
  • AtomixElevation - Material elevation scale
  • AtomixTypography - Text style system
  • AtomixTheme - Light/dark theme configuration

Atoms

  • AtomixText - Text with typography
  • AtomixIcon - Icon component
  • AtomixDivider - Visual separator
  • AtomixSpacer - Spacing helper
  • AtomixBadge - Status badges

Molecules

  • AtomixButton - Buttons with variants and states
  • AtomixTextField - Text input with validation
  • AtomixChip - Selectable chips
  • AtomixListTile - List items

Organisms

  • AtomixAppBar - Application bar
  • AtomixCard - Cards with variants
  • AtomixDialog - Modal dialogs
  • AtomixBottomSheet - Bottom sheets

🎨 Customization

Create custom themes:

final customTheme = AtomixTheme.themeData(
  brightness: Brightness.light,
  primaryColor: Colors.blue,
  secondaryColor: Colors.orange,
);

📚 Documentation

For complete documentation, examples, and interactive component gallery:

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

Osman Armando Jimenez Cortes

🐛 Issues

Found a bug or have a feature request? Please open an issue on GitHub.

Libraries

atomix_design_flutter