An expressive way to effortlessly build design systems in Flutter

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

重要提示

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

用法

Simple Mix

import 'package:mix/mix.dart';

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

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