app_card.dartYou write
@MixWidget()
final appCardStyle = BoxStyler()
.color(Colors.deepPurple)
.paddingAll(16)
.borderRounded(12);
Mix
Flutter styling without the boilerplate. Styling system for Flutter: utility-first styles, tokens, variants, and animation.
Features
Style composition, reactive variants and design tokens — in one package.
Explore real Flutter widgets alongside the Dart code that creates them.
Intuitive styling
Define size, color, and shape in a single fluent chain. Each method returns a new style — readable, composable, and type-safe.
See the styling guideLoading source...
Waiting...
Context-reactive variants
Declare hover behaviour inline — colour, scale, and shadow all react to state without conditional logic.
Explore variantsLoading source...
Waiting...
Powerful animations
Define keyframe timelines with multiple property tracks directly inside styles. No external animation controllers needed.
Animation docsLoading source...
Waiting...
Design system buttons
Define a base button once, then compose variants by adding just what differs. Text styling flows through via inherited defaults.
Build your own widgetLoading source...
Waiting...
Text directives
Apply uppercase and capitalize transforms directly in the style. Directives stay attached through merges and composition.
Directives guideLoading source...
Waiting...
Code generation
Turn a Styler into a widget API.
Annotate the style you already use. Mix generates a typed StatelessWidget that is ready for layouts, const constructors, and your design system’s public API.
app_card.g.dartGenerated
class AppCard extends StatelessWidget {
const AppCard({super.key, this.child});
final Widget? child;
@override
Widget build(BuildContext context) {
return appCardStyle.call(
key: this.key,
child: this.child,
);
}
}usage.dartUse it
const AppCard(
child: Text(
'A real Flutter widget',
),
);Get started
Add Mix to your project.
flutter pub add mixMix 2.3.1 requires Dart 3.12 and Flutter 3.44 or newer. Installation details