Styling with Mix

In Flutter, styling lives inside your widget tree — a Container owns its color, padding, and border. This makes styles hard to reuse, share, or override without duplicating widget code. Mix solves this by pulling style declarations out of the tree into composable, chainable objects called stylers.

Style and Styler

Style is the abstract base class for all styling in Mix. Concrete implementations follow the naming convention <Widget>Styler — for example, BoxStyler, TextStyler, IconStyler. Each styler is a declarative builder that resolves with BuildContext at build time, giving it access to theme data, media queries, and other contextual information.

You define a style, then pass it to the matching Mix widget:

import 'package:flutter/material.dart';
import 'package:mix/mix.dart';
 
final style = BoxStyler()
    .width(240)
    .height(100)
    .color(Colors.blue)
    .borderRounded(12);
 
// Pass the style to a Box widget
Box(style: style, child: Text('Hello'));

Fluent Chaining

Mix provides a chainable API that mirrors Flutter’s naming conventions. Each method returns a new styler with the property applied, so you can chain as many as you need:

final style = BoxStyler()
    .color(Colors.blue)
    .size(100, 100)
    .paddingAll(16)
    .borderRounded(8)
    .shadow(blurRadius: 10, color: Colors.black26);

Style Composition and Override

Build new styles on top of existing ones. This keeps your design consistent — define a base once, then create variations by chaining additional properties:

final base = BoxStyler()
    .paddingX(16)
    .paddingY(8)
    .borderRounded(8)
    .color(Colors.black);
 
final solid = base.color(Colors.blue);
 
final soft = base.color(Colors.blue.shade100);

Order matters: properties are merged in sequence, so later values override earlier ones. In the example above, base.color(Colors.blue) replaces the original Colors.black.

Dynamic and Context-Aware Styling

Styles can adapt to user interactions and context using variants. Instead of writing conditional logic in your widget tree, you declare what changes and when:

final button = BoxStyler()
  .color(Colors.blue)
  .onHovered(.color(Colors.blue.shade700))
  .onDark(.color(Colors.blue.shade200));

Variants are covered in depth in the Dynamic Styling guide.