tramleit/mix

An expressive way to effortlessly build design systems in Flutter.

---

Build Flutter design systems expressively and effortlessly. Mix offers primitive building blocks to help developers and designers create beautiful UI with confidence.

Important

Mix is currently being used internally to build design systems in Flutter.
It is still in heavy development. Major APIs are expected to change until the 1.0 release.

Motivation

Flutter favors composition over inheritance when building widgets. This choice keeps Flutter API extremely easy to interact with and powerful.

However, in our experience, both inheritance and composition are essential when defining presentation attributes. Themes are an excellent example of inheritance but are not extended across all visual properties.

When building a design system, it can be challenging to develop and maintain a consistent UI that shares the same design language for widget variations or across different widgets within the design system.

Maintaining a design system is much harder than building it.

Goals

Provide simple API to compose design and layout attributes for widgets. That can easily be extended, overridden, and combined; we call this a Mix.

• Visual attributes should be defined outside of a BuildContext by a composable API shared across the design system.
• Style consistently with a global context
• Allow to respond to changing requirements quickly
• Create adaptive designs and layouts with ease

Principles

• Abstract Flutter API, and not modify its behavior.
• Development efficiency is gained by the ease of use, consistency, and reusability, not coding speed.
• Composability should be a priority. Mixes, Attributes, Widgets, etc.
• Designer friendly (use simple standard semantics when possible).

Usage

Simple Mix

import 'package:mix/mix.dart';

final style = Mix(
  height(150),
  width(150),
);

// Use in a Box widget
Box
  mix:style,
  child:Child(),
);

Read our docs for more information

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Leo Farias 🤔 💻 📖

Bruno D'Luka 💻

Rick Berger 📖

Souvik Biswas 🖋 ✅

This project follows the all-contributors specification. Contributions of any kind welcome!