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.
The order of the attributes is important, and keep in mind when composing and overriding them. Attributes will be prioritized from right to left.
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), );
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), ]);
It also provides the possibility to use optional attributes using
final mix = Mix.fromList([ if (hasError) bgColor(Colors.red) else bgColor(Colors.green), textColor(Colors.white), bold(), ]);
Mixes are immutable. The new Mix created will inherit all attributes of the original.
If you have an existing Mix you can add attributes to it by calling the
mix method. This will return a new Mix with the new attributes added.
final newMix = mix.mix( height(200), width(200), bgColor(Colors.red), );
mix but allows you to pass a List of attributes.
final newMix = mix.addAttributes([ height(200), width(200), bgColor(Colors.red), ]);
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.
final thirdMix = firstMix.apply(secondMix);
If you are receiving a nullable Mix as a parameter there is a simple helper method to keep your code clean:
Mix? secondMix; final thirdMix = firstMix.applyMaybe(secondMix);
Creates a new Mix from a positional arguments of Mixes.
final thirdMix = Mix.combine(firstMix, secondMix);
Creates a new Mix from a List of Mixes.
final fifthMix = Mix.combineAll([firstMix, secondMix, thirdMix, fourthMix]);
Uses a Mix based on a condition
final errorMix = Mix(bgColor(Colors.red)); final successMix = Mix(bgColor(Colors.green)); final mix = Mix.chooser( condition: hasError, ifTrue: errorMix, ifFalse: succesMix, );