Core Concepts

Attributes & Utilities#

Attributes are the foundation for visual characteristics and properties, that can be defined and added to a Mix. In Flutter we say "Everything is a widget", so in Mix.

Everything is an Attribute

To make interaction with Attributes easier we have Utility functions. That allow for more control over how an attribute is composed.

Lets take the following example.

Mix(height(100));

This is defining a Mix with the box height attribute of 100. However height() is a Utility that allows us to compose an Attribute.

Similar to this

height(double value) => BoxAttribute(height: value);

With that in mind you can think of the following being equivalent.

Mix(height(100))
// is equivalent to
Mix(BoxAttribute(height: 100))

As you can see Utilities are not required for comsing Mixes however, make a cleaner API possible and overall better development experience.

Mixable Widgets#

These are the widget primitives that allow a Mix to be rendered. At first sight it might look like these widgets are doing a lot, however they are just wrapping basic Flutter widgets and allowing their visual properties to be defined through a Mix.

The most basic widget primitive. Box is not like a Container, "Box is a Container". That means you can think of all BoxAttributes as Container properties.

You might think Box is like a Container, but that would be wrong. Box is a Container.

That means that this:

Box(mix:Mix(height(100)));

will become the following

Container(height: 100);

You can start to think as Utilities as shortcuts to defining visual properties.

Box(mix:Mix(rounded(100)));

will become the following

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(
      Radius.circular(10),
    ),
  ),
)