Mechanix.dart
A unified Flutter UI package for building consistent, beautiful applications with zero configuration
Mechanix UI
Build stunning Flutter applications with a complete design system. Mechanix UI delivers production-ready components, intelligent theming, and effortless customization.
Core Principles
Customization
Full control over every component when needed, with intelligent defaults that work out of the box
Extensibility
Seamlessly integrate with your existing codebase and extend components without fighting the framework
Ease of Use
Intuitive APIs, comprehensive documentation, and type safety through Dart
Zero Configuration
Start building immediately—no setup files, no config boilerplate, just import and create
Quick Start
Add to pubspec.yaml
Add Mechanix UI to your Flutter project's pubspec.yaml:
dependencies:
widgets:
git:
url: https://github.com/mecha-org/mechanix.dart.git
path: flutter/widgets
ref: mainInstall dependencies
flutter pub getImport and use
import 'package:widgets/mechanix.dart';Mechanix UI requires Flutter SDK 3.0.0 or higher and supports all platforms including Flutter for Embedded Linux.
Mechanix Theme
A comprehensive theming system that provides complete control over your app's visual appearance with built-in support for multiple variants, dark/light modes, and seamless theme extension integration.
Features
OKLCH-Powered Color System
Mechanix UI uses the OKLCH color space to generate perceptually uniform color shades for variants, backgrounds, and foregrounds
Multiple Theme Variants
Pre-built color schemes with custom variant support and automatic shade generation via OKLCH
Automatic Theme Management
System theme detection with manual control and smooth animated transitions
OKLCH Color Advantages
- Accurate Color Control - Fine-tune brightness and saturation more precisely than RGB/HSL
- Accessible by Default - Automatically maintains readable contrast across all color shades
- True Color Harmony - Colors that naturally work well together
Theme Capabilities
- Pre-built Color Schemes - Multiple Mechanix variants (blue, green, purple, amber, etc.)
- Custom Variants - Define your own color variants with automatic shade generation via OKLCH
- Dark/Light Theme Pairs - Complete theme sets for both modes with proper contrast ratios
- Easy Switching - Change entire color scheme with one property
- System Theme Detection - Automatically follows device theme preferences
- Manual Theme Control - Full control over theme mode when needed
- Animated Transitions - Smooth theme switching animations
Application Methods
The Direct Child approach is the simplest way to apply MechanixTheme to your application. Perfect for basic apps, quick prototyping, and situations where you don't need complex theme logic.
import 'package:flutter/material.dart';
import 'package:widgets/mechanix.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MechanixTheme(
data: MechanixThemeData(
mechanixVariant: MechanixVariant.amber,
mechanixBackgroundVariant:
MechanixVariant.custom(defaultBackgroundColor),
mechanixForegroundVariant:
MechanixVariant.custom(defaultForegroundColor),
),
child: MaterialApp(
title: 'My Mechanix App',
home: HomePage(),
),
);
}
}Best for: Simple applications, prototypes, apps without dynamic theming
The Builder Pattern provides maximum flexibility and control. Access the fully resolved MechanixThemeData during the build process for dynamic theme-dependent configurations.
import 'package:flutter/material.dart';
import 'package:widgets/mechanix.dart';
import 'package:watch_it/watch_it.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget with WatchItMixin {
final themeMode = watchPropertyValue((ThemeToggle t) => t.themeMode);
final mechanixVariant = watchPropertyValue(
(ThemeToggle t) => t.mechanixVariant,
);
@override
Widget build(BuildContext context) {
return MechanixTheme(
data: MechanixThemeData(
mechanixVariant: mechanixVariant,
mechanixBackgroundVariant:
MechanixVariant.custom(defaultBackgroundColor),
mechanixForegroundVariant:
MechanixVariant.custom(defaultForegroundColor),
),
builder: (context, mechanix, child) {
return MaterialApp(
theme: mechanix.lightTheme,
darkTheme: mechanix.darkTheme,
themeMode: themeMode,
title: 'My Mechanix App',
home: child,
);
},
child: HomePage(),
);
}
}Best for: Complex applications, state management integration, dynamic theme switching
Components
Mechanix UI provides a comprehensive set of pre-built widgets following the Mechanix design system.