Getting Started
This guide walks you through installing Mix and building your first styled widget.
Prerequisites
Before installing Mix, ensure you have:
- Dart SDK: 3.11.0 or higher
- Flutter: 3.41.0 or higher
Installation
Install the latest version:
flutter pub add mixOr 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'));
}
}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)
.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
- mix_tailwinds Ecosystem Package — utility-first styling inspired by Tailwind CSS