Getting Started

Installation

Install the latest version:

flutter pub add mix

Or pin explicitly in pubspec.yaml:

dependencies:
  mix: ^{latest_version}

Import it where you use it:

import 'package:mix/mix.dart';

Your first Mix widget

Build a blue card with “Hello Mix” text. The BoxStyler and TextStyler classes define styles with a fluent API, and calling them directly creates the corresponding widget:

import 'package:flutter/material.dart';
import 'package:mix/mix.dart';
 
class Example extends StatelessWidget {
  const Example({super.key});
 
  BoxStyler get _box => BoxStyler()
      .size(240, 100)
      .color(Colors.blue)
      .alignment(.center)
      .borderRounded(12)
      .border(.all(.color(Colors.black).width(1).style(.solid)));
 
  TextStyler get _text => TextStyler().color(Colors.white).fontSize(18);
 
  @override
  Widget build(BuildContext context) {
    return _box(child: _text('Hello Mix'));
  }
}

Reuse the style

Extract styles into top-level variables and reuse them across widgets. You can also pass styles via the style parameter using Mix’s widget classes like Box and StyledText, and override individual properties by chaining:

final primaryCard = BoxStyler()
  .color(Colors.blue)
  .borderRounded(12);
 
final box = Box(style: primaryCard, child: StyledText('Primary'));
 
final box2 = Box(
  style: primaryCard.color(Colors.green),
  child: StyledText('Success'),
);

What’s next

• Dynamic Styling — adapt styles for hover, press, dark mode, and breakpoints
• Animations Guide — implicit, phase, and keyframe animations
• Design Tokens and Theming — reusable tokens for colors, spacing, and radii
• Widget Reference — all available Mix widgets (Box, FlexBox, Text, Icon, and more)
• Widget Modifiers — opacity, clipping, visibility, and other widget wrappers
• mix_tailwinds Ecosystem Package — utility-first styling inspired by Tailwind CSS