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)
.paddingAll(16)
.borderRounded(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 guideAdd Mix to your project.
Ready to build?
Start building your first Mix-styled widget in under 5 minutes.