Home

Awesome

<picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/leoafarias/mix/main/assets/dark.svg"> <img alt="Mix logo" src="https://raw.githubusercontent.com/leoafarias/mix/main/assets/light.svg"> </picture>

GitHub stars Pub Version Pub Likes Pub Points MIT Licence Awesome Flutter

Mix is a simple and intuitive styling system for Flutter, enabling the creation of beautiful and consistent UIs with ease.

Mix brings industry-proven design system concepts to Flutter. It separates style semantics from widgets while maintaining an easy-to-understand and manageable relationship between them.

Why Mix?

Flutter developers often face challenges when it comes to styling widgets and maintaining a consistent look and feel across their apps. Flutter is heavily dependent on the Material Design System and theming, and that can be challenging, especially when creating your own design system.

Mix addresses these challenges by creating a styling system that uses utility functions for a more intuitive and composable way to style. This approach can be kept consistent across widgets and files.

Goals with Mix

Guiding Principles

Key Features

Powerful Styling API:

Styles are easily defined using the Style class, which allows you to define a style's properties and values. Here's an example of defining a style:

final style = Style(
  $box.height(100),
  $box.width(100),
  $box.color.purple(),
  $box.borderRadius(10),
);

Learn more about styling

First-Class Variant Support:

First-class support for variants, allowing you to define styling variations that can be applied conditionally or responsively.

const onOutlined = Variant('outlined');

final baseStyle = Style(
  $box.borderRadius(10),
  $box.color.black(),
  $text.style.color.white(),

  onOutlined(
    $box.color.transparent(),
    $box.border.color.black(),
    $text.style.color.black(),
  ),
);

final outlinedStyle = baseStyle.applyVariant(onOutlined);

Learn more about variants

BuildContext Responsive Styling:

Mix allows you to define styles that are context-aware, allowing you to apply styles conditionally based on the BuildContext.

final style = Style(
  $box.color.black(),
  $text.style.color.white(),
  $on.dark(
    $box.color.white(),
    $text.style.color.black(),
  ),
);

Learn more about context variants

Design Tokens and Theming:

Mix goes beyond the Material Theme definitions by allowing the definition of design tokens and properties that can be used across all styling utilities.

Utility-First Approach:

A complete set of utility primitives allows you to define styling properties and values in a more intuitive and composable way.

$box.padding(20); /// Padding 20 on all sides
$box.padding(20, 10); /// Padding 20 on top and bottom, 10 on left and right

$box.padding.top(20); /// Padding 20 on top
$box.padding.horizontal(20); /// Padding 20 on left and right

Learn more about utilities

Contributors

<a href="https://github.com/conceptadev/mix/graphs/contributors"> <img src="https://contrib.rocks/image?repo=conceptadev/mix" /> </a>