Mix
Overview

Getting Started

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

This guide walks you through installing Mix and building your first styled widget.

Prerequisites

Before installing Mix, ensure you have:

  • Dart SDK: 3.12.0 or higher (below 4.0.0)
  • Flutter: 3.44.0 or higher

Installation

Install the latest version:

flutter pub add mix

Or pin explicitly in pubspec.yaml:

dependencies:
  mix: ^2.3.1

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)
      .borderRadius(.circular(12))
      .border(
        .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'));
  }
}
Resolving preview metadata...

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)
    .borderRadius(.circular(12));

final box = Box(style: primaryCard, child: StyledText('Primary'));

final box2 = Box(
  style: primaryCard.color(Colors.green),
  child: StyledText('Success'),
);

What's next

View page source on GitHub

Introduction

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

On this page

PrerequisitesInstallationYour first Mix widgetReuse the styleWhat's next