Flutter styling withoutthe boilerplate.
Fluent, chainable styles. Reactive variants. Design tokens. Build design systems that scale.
Less nesting. More clarity.
Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius:
BorderRadius.circular(8),
),
child: ...
)// Style can live outside the widget
final cardStyle = BoxStyler()
.color(Colors.blue)
.padding(.all(16))
.borderRadius(.circular(8));
// Widget stays clean
Box(style: cardStyle, child: ...)Style composition, reactive variants, and design tokens — in one package.
Mix uses Dart's type system to make styles composable and type-safe. Chain methods to build styles, compose them with variants, and let the framework handle the rest.
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 guideContext-Reactive Variants
Declare hover behavior inline — color, scale, and shadow all react to state without conditional logic.
Explore variantsPowerful Animations
Define keyframe timelines with multiple property tracks directly inside styles. No external animation controllers needed.
Animation docsDesign 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 widgetText Directives
Apply uppercase and capitalize transforms directly in the style. Directives stay attached through merges and composition.
Directives guideTurn 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.
@MixWidget()AppCard@MixWidget()
final appCardStyle = BoxStyler()
.color(Colors.deepPurple)
.paddingAll(16)
.borderRounded(12);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,
);
}
}Compose it anywhere.
const AppCard(
child: Text(
'A real Flutter widget',
),
);Add Mix to your project.
Ready to build?
Start building your first Mix-styled widget in under 5 minutes.