Flutter styling without
the 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 behaviour inline — colour, 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 docsOne toolkit for styling, components and behaviour.
Each project keeps its own documentation. Search and navigation span all three.
Mix
Styling system for Flutter: utility-first styles, tokens, variants, and animation.
Remix
Flutter components built on Mix and Naked UI, with the Fortal design system.
Naked UI
Headless Flutter widgets: behavior, semantics, and interaction state without styling.
Add Mix to your project.
flutter pub add mix