Skip to Content
DocsOverviewUtility-First

Utility-First Approach

Mix embraces a utility-first styling model through the Styler API. A styler (such as BoxStyler) provides small, composable utilities — like color, border, borderRadius, or padding — that you combine to express the style you need.

This approach promotes:

  • Composability — combine, conditionally apply, or reuse utilities across contexts
  • Efficiency — chainable methods reduce boilerplate compared to nested widget trees
  • Flexibility — build modular UIs without being locked into rigid abstractions
  • Readability — styles read top-to-bottom as a list of properties

Building Styles

Styler methods are descriptive, predictable, and easy to chain:

final boxStyle = BoxStyler()
    .color(Colors.red)
    .size(100, 100)
    .borderRounded(10);

Each method adds a style property and returns the styler, so you can chain as many as you need.

Resolving preview metadata...

Intuitive and Familiar API

Method names follow Flutter’s own conventions, so the API feels familiar:

// Explicit alignment
BoxStyler().alignment(.centerRight);
 
// Spacing helpers
BoxStyler().padding(.all(16));
BoxStyler().padding(.symmetric(horizontal: 12, vertical: 8));
BoxStyler().paddingOnly(left: 12, top: 8);

Built-in Border Helpers

Direct border methods are available on the styler:

// Red border on all sides
BoxStyler().borderAll(color: Colors.red);
 
// Top border only with custom width
BoxStyler().borderTop(color: Colors.red, width: 2);

Custom Helpers

You can create your own shorthand by defining helper functions or extending BoxStyler with extension methods:

// Custom helper function
BoxStyler accentBorder(Color color) => BoxStyler().borderTop(color: color, width: 2);
 
// Use the helper
accentBorder(Colors.red);
 
// Extension method
extension on BoxStyler {
  BoxStyler borderRedTop() => borderTop(color: Colors.red);
}
 
// Use the extension method
BoxStyler().borderRedTop();

Next Steps

Getting startedComparative Overview