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 |
Lucas Oliveira |
Pedro Bissonho |
This project follows the all-contributors specification. Contributions of any kind welcome!