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:

• Declarative Semantic — Facilitates meaningful and easily understandable styling for widgets.
• Composability — freely combine, conditionally apply, or reuse utilities across contexts.
• Efficiency — simple, chainable methods and reusability reduce boilerplate.
• Flexibility — build modular UIs without being locked into rigid abstractions.

Example: Building Styles

Styler methods are descriptive, predictable, and easy to chain. For example:

final boxStyle = BoxStyler()
  .width(100)
  .paddingAll(10)
  .alignment(Alignment.center)
  .color(Colors.red);

The example above shows how you can build up a style step by step using the builder design pattern. Each method—like .width(100) or .color(Colors.red)—adds a style property, and you can chain them together. This makes it easy to create and reuse styles in a clear and readable way.

Intuitive and Familiar API

Mix’s API is designed to be intuitive and easy to pick up, especially for Flutter developers. The method names and patterns closely follow those established by Flutter itself, making the API both easy to understand and predict.

// Explicit alignment
BoxStyler().alignment(Alignment.centerRight);
 
// Spacing helpers
BoxStyler().paddingAll(16); // All sides
BoxStyler().paddingX(12).paddingY(8); // Horizontal and vertical
BoxStyler().paddingOnly(horizontal: 12, vertical: 8); // Specific sides

Styler helpers (aliases)

Create small helper functions or variables to reuse common styler patterns.

Example

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);

Creating helpers

You can create your own shorthand by either defining small helper functions that return a BoxStyler, or by extending BoxStyler with your own extension methods:

// Custom helper for border top styling
BoxStyler borderTop(Color color) => BoxStyler().borderTop(color: color);
 
// Use the helper
borderTop(Colors.red);
 
// Extension method
extension on BoxStyler {
  BoxStyler borderRedTop() => borderTop(color: Colors.red);
}
 
// Use the extension method
BoxStyler().borderRedTop();