Mix documentation

Getting Started

Install Mix 2 and build your first styled widget with the fluent Styler API.

Introduction

Learn the core ideas behind Mix and how it separates style semantics from widget structure.

Utility-First Approach

Understand Mix's utility-first styling model and composable Styler patterns.

Comparison

Compare Mix and plain Flutter approaches for styling and interaction states.

Migration Guide

Migrate existing Mix code from v1.x patterns to the Mix 2.0 Styler API.

Styling with Mix

Compose reusable, context-aware styles using Mix styler APIs.

Design Tokens

Define and consume Mix design tokens — provided through MixScope or derived from BuildContext — for consistent theming.

Dynamic Styling

Use variants to style widgets based on state, platform, and context.

Widget Modifiers

Wrap widgets with modifier APIs for layout, visual effects, and transforms.

Animations

Build implicit, phase, and keyframe animations with Mix styling APIs.

Directives

Transform text and numeric values at style resolution time with Mix directives.

Common Patterns

Copy ready-made Mix patterns for buttons, layouts, tokens, and responsive styling

StyleWidgets

Overview of Mix prebuilt styled widgets and their typed Styler APIs.

Box

Style Flutter containers with BoxStyler — decoration, padding, margins, transforms, constraints, and interaction variants in Mix.

FlexBox

Build styled flex layouts in Flutter with FlexBoxStyler — direction, alignment, spacing, decoration, and variants for FlexBox, RowBox, and ColumnBox.

StyledText

Style Flutter text with TextStyler — font size, weight, color, decorations, text directives, and responsive variants in Mix.

StyledIcon

Style Flutter icons with IconStyler — size, color, weight, shadows, optical sizing, and responsive variants in Mix.

StyledImage

Style Flutter images with ImageStyler — dimensions, color blend modes, fit, filters, and responsive variants in Mix.

Pressable

Handle press, hover, focus, and disabled interaction states for Mix widgets.

StackBox

Build styled stacked layouts in Flutter with StackBoxStyler — positioning, decoration, constraints, and responsive variants in Mix.

Building a Design System Widget

Create a Mix widget with specs, stylers, variants, and generated APIs.

Advanced Widget State Control

Manage hover, press, focus, and disabled states for Mix widgets.

Theming

Build and apply token-driven Mix themes with MixScope.

Creating a Custom Context Variant

Create and apply custom context variants driven by BuildContext conditions.

Creating Custom Tokens

Create custom Mix design tokens for value types the built-in tokens don't cover

mix_winds

Use Tailwind-like utility class syntax to style Flutter widgets with Mix.

mix_schema

Render AI protocol payloads into Mix-powered Flutter UI through a validated schema pipeline.

mix_lint

Catch Styler chain issues and enforce Mix conventions with the mix_lint analyzer plugin

mix_generator

Generate Specs, Stylers, Mix properties, modifiers, and widget wrappers with mix_generator