Introduction

To support the Mix framework's design principles, the Mix package provides a set of widgets that extend Flutter's core functionality with additional features and utilities. These widgets are called StyledWidgets. They are designed to be flexible, style-friendly, and easy to use, allowing you to build custom-styled components with ease.

What are StyledWidgets?

They are a set of widgets that are able to receive a Style object as a parameter. This object contains a set of attributes that will be applied to the widget, such as color, padding, margin, and more. The most common StyledWidget is Box, which is equivalent to Flutter's Container.

StyledWidgets available in Mix

Box

As already mentioned, the Box widget is equivalent to Flutter's Container. You can read more about it here.

Box(
    style: Style(
        $box.width(100),
        $box.height(100),
        $box.backgroundColor(Colors.blue),
    )
)

PressableBox

The PressableBox widget is merge between a Container and GestureDetector. It allows you to add some interaction to your Box widget, and use variants like onPress, and onLongPress. You can read more about it here.

PressableBox(
    onPress: () => {// Do something},
    style: Style(
    $box.color.blue(),
    $box.width(100),
    $box.height(100),
    ),
    child: // <- Enter the child parameter,
)

StyledText

It's a widget that can apply text styles to a Text widget. You can read more about it here.

StyledText(
    'Hello, World!',
    style: Style(
        $text.style.color(Colors.blue),
        $text.style.fontSize(20),
    )
)

StyledIcon

StyledIcon's a widget equivalent to an Icon widget. You can read more about it here.

StyledIcon(
    Icons.ac_unit,
    style: Style(
        $icon.color(Colors.blue),
        $icon.size(30),
    )
)

StyleImage

It's a widget that can apply styles to an Image widget. You can read more about it here.

StyledImage(
    style: Style(
        $box.color.blue(),
        $flex.direction.horizontal(),
        $flex.mainAxisAlignment.spaceBetween(),
    ),
    image: // <-- Enter the ImageProvider here,
)

FlexBox, HBox and VBox

These are equivalent to the Flex, Row and Column widget in Flutter. Everything you are able to do with the Box widget, you are able to do with FlexBox, HBox and VBox. However, the main difference is that you can specify flex attributes to it. You can read more about it here.

FlexBox(
    direction: Axis.horizontal,
    style: Style(
        $box.color.blue(),
        $flex.direction.horizontal(),
        $flex.mainAxisAlignment.spaceBetween(),
    ),
    children: [
        Box(
        child: Text('Box 1'),
        ),
        Box(
        child: Text('Box 2'),
        ),
        Box(
        child: Text('Box 3'),
        ),
    ],
)

ZBox

This is a widget that allows you to layout widgets like a Stack widget. You can read more about it here.

ZBox(
    style: Style(
        $stack.alignment.centerLeft(),
        $box.width(200),
        $box.height(200),
    ),
    children: [
        Container(
        color: Colors.red,
        width: 100,
        height: 100,
        ),
        Container(
        color: Colors.blue,
        width: 50,
        height: 50,
        ),
    ],
)