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

To make a Box change color when hovered, add .onHovered(...) to the 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(.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(
    .color(Colors.blue)
      .width(200)
  );
 
final styleB = styleA.onHovered(.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(.color(Colors.blue))
  .onLight(.color(Colors.green));
 
final style = BoxStyler()
  .color(Colors.red)
  .height(100)
  .width(100)
  .borderRounded(10)
  .onHovered(hoverStyle);

Variant Types

Mix provides three types of variants for different use cases:

State variants (onHovered, onPressed, onFocused, onDisabled) respond to user interactions. Context variants (onDark, onMobile, onBuilder) respond to BuildContext values. Named variants are custom identifiers you define and apply manually.

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.

Related

• Styling with Mix — fluent Styler API basics
• Design Tokens — token-based theming with MixScope
• Pressable — interaction state handling for widgets