Dynamic Styling

Mix lets you define state-aware styles in one place instead of scattering conditional logic throughout your widget tree. Styles automatically adapt to hover, press, disabled, dark mode, and other contexts.

Understanding Variants

Let’s look at a simple example: suppose you want a Box to change its color when hovered. With Mix, you can achieve this by simply adding .onHovered(...) to your style definition.

import 'package:flutter/material.dart';
import 'package:mix/mix.dart';
 
final style = BoxStyler()
    .color(Colors.red)
    .height(100)
    .width(100)
    .borderRounded(10)
    .onHovered(BoxStyler().color(Colors.blue));

Mix automatically merges the hovered style with the base style—you only define what changes.

Composing Styles with Variants

When you define a style, it is expected to be reused in multiple places. With Mix, you can easily reuse styles even when a variant was defined inside it.

final styleA = BoxStyler()
  .color(Colors.red)
  .height(100)
  .width(100)
  .borderRounded(10)
  .onHovered(
    BoxStyler()
      .color(Colors.blue)
      .width(200)
  );
 
final styleB = styleA.onHovered(BoxStyler().color(Colors.green));

In this example, styleB will have the same style as styleA, but when the widget is hovered it has a different color and maintains the width equal to 200. So the final style when hovered will be:

BoxStyler()
  .color(Colors.green)
  .height(100)
  .width(200)
  .borderRounded(10);

Nesting Variants

There are cases where you want to combine multiple variants to achieve a specific style. For example, you want to apply a variant when the widget is hovered and want different colors for dark mode and light mode. With Mix, you can achieve this by simply nesting the variants.

final hoverStyle = BoxStyler()
  .onDark(BoxStyler().color(Colors.blue))
  .onLight(BoxStyler().color(Colors.green));
 
final style = BoxStyler()
  .color(Colors.red)
  .height(100)
  .width(100)
  .borderRounded(10)
  .onHovered(hoverStyle);

Built-in Variants

Built-in Variant Methods

Below is a list of all built-in variant methods available on stylers (e.g., BoxStyler, TextStyler). Each method allows you to apply a style based on a specific state, platform, breakpoint, or context.