Mixing#

You will compose visual attributes using Mixes. This allows you to compose, combine, inherit and override visual attributes. If you come from the web you can think of a Mix as a stylesheet. That allows to group visual attributes.

Create a Mix#

Mix()#

You can create a Mix by calling it's class and passing positional attributes like so

final mix = Mix(
    height(100),
    width(100),
    bgColor(Colors.purple),
    rounded(10),
);

Mix.fromList()#

Allows you to create a Mix from a List of attributes. This has the same behavior but provides the ability to receive a List instead of positional arguments.

final mix = Mix.fromList([
    height(100),
    width(100),
    bgColor(Colors.purple),
    rounded(10),
]);

Extend an existing Mix#

Mixes are immutable. The new Mix created will inherit all attributes of the original.

Add attributes#

.add()#

If you have an existing Mix you can add attributes to it by calling the add method. This will return a new Mix with the new attributes added.

final newMix = mix.add(
    height(200),
    width(200),
    bgColor(Colors.red),
);

.addList()#

Similar to add but allows you to pass a List of attributes.

final newMix = mix.addList([
    height(200),
    width(200),
    bgColor(Colors.red),
]);

Combining Mixes#

Combining Mixes is a critical part of composing visual attributes. There are a few methods, and constructors that allow for easy ways to combine them.

.apply()#

final thirdMix = firstMix.apply(secondMix);

.applyMaybe()#

If you are receiving a nullable Mix as a parameter there is a simple helper method to keep your code clean.

Mix.combine()#

Creates a new Mix from a positional arguments of Mixes.

Mix.combineAll()#

Creates a new Mix from a List of Mixes.

Utility Helpers#

Mix.chooser()#