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.
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.
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
- 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).
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
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!