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

⚠️

Currently used internally to build design systems in Flutter. However, it is still in the experimental development stages. Major APIs will 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.

Maintaining a design system is much harder than building it.

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.

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