Getting Started

Installation

Run the following command in the root of your project:

flutter pub add mix

Import it everywhere you use it:

import 'package:mix/mix.dart';

Styling Your First Widget

Flutter's Traditional Approach

In Flutter, you might style a Container with elevation and color like this:

Container(
  height: 100,
  width: 100,
  margin: EdgeInsets.symmetric(
    vertical: 10,
    horizontal: 20,
  ),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
    border: Border.all(
      color: Colors.black,
      width: 1,
      style: BorderStyle.solid,
    ),
  ),
  child: Text('Hello World'),
);

Mix's Approach

This is how you would style the same Container with Mix:

final style = Style(
  $box.height(100),
  $box.width(100),
  $box.margin(10, 20),
  $box.color.blue(),
  $box.borderRadius(10),
  $box.border(
    color: Colors.black,
    width: 1,
    style: BorderStyle.solid,
  ),
);
 
Box(
  style: style,
  child: Text('Hello Mix'),
);

Introduction Utility-First