Mix

Type-safe styling for Flutter, with style definitions separate from widget structure.

Package · Documentation · BSD 3-Clause license

Core concepts

• Styler → Spec → Widget: a typed style resolves to data that a widget renders.
• Styles are values: fluent methods return new merged styles, so bases can be reused.
• Props defer values: concrete values, tokens, and Mix values resolve with context; plain values replace, while Mix values accumulate fieldwise.
• Tokens name values: MixScope supplies them; ContextToken can compute a default.
• Variants are conditional patches: state-dependent patches have higher priority, with declaration order preserved within each priority group.
• Modifiers wrap widgets; directives transform values during resolution or rendering.
• Animation interpolates resolved specs: implicit, phase, and keyframe modes.
• Annotations generate typed plumbing and widgets from style recipes.

The decision log explain the boundaries and tradeoffs behind these concepts. The bullets describe the model; the log preserves reasons to revisit a choice.

Start

flutter pub add mix

Current sources require Dart 3.12+ and Flutter 3.44+; check the package manifest for the version you use.

import 'package:flutter/material.dart';
import 'package:mix/mix.dart';

final cardStyle = BoxStyler()
    .size(240, 100)
    .color(Colors.blue)
    .alignment(.center)
    .borderRadius(.circular(12));

final card = Box(
  style: cardStyle,
  child: StyledText(
    'Hello Mix',
    style: TextStyler().color(Colors.white).fontSize(18),
  ),
);

Packages

Package	Purpose
mix	Styling, tokens, variants, animation and layout
mix_annotations	Code-generation annotations
mix_generator	build_runner generators
mix_lint	Mix analyzer rules
mix_protocol	JSON contract, codecs and schemas
mix_winds	Tailwind utility compiler and Flutter widgets
mix_chart	Line, bar and pie charts
mix_chart_protocol	Optional chart JSON vocabulary

Examples and guides

• Showcase: widgets, responsive layouts, interactions and charts.
• Example workspace setup: dependencies and web builds.
• Styling, variants, tokens, animation.
• Grid layout, scope and theming, token migration.
• MixWidget constructors, protocol integration, protocol publishing.

Contribute

Read AGENTS.md for setup, commands, generated-file rules and verification. Dependencies are bootstrapped with Melos. The website source lives separately.

The Mix agent skill includes portable API references. Install it in a consuming project with:

npx skills add btwld/mix --skill mix -y

Contributors