Decorators

Decorators allow to extend Mix functionality by providing an easy way to define it's Widget composition tree. This allows to keep the a lean core, and give complete control over layout, attribute, and widgets not supported by our MixableWidgets.

As an example we will provide the implementation for our scale attribute. The Container does not provide a scale property, so the implementation is done by wrapping a Container with the Transform widget.

Transform.scale(
  scale: 0.5,
  child: Container(
    child: const Text('Half sized box'),
  ),
)

Since Box is a Container it also does not have a scale property. However by using a Decorator we can accomlish the same effect.

Box(mix: Mix(scale(0.5)));

Decorators Catalog#

• aspectRatio: Aspect ratio
• opacity: Opacity
• rotate: Rotate in quarter turns
• scale: Scale

Flex#

Apply flex value to a widget that can be used inside of FlexBox

• flex: Flex value
• flexFit: Flex fit
• expanded: Expanded
• flexible: Flexible