Introduction

To align with the design principles of the Mix framework, the Mix package offers a collection of widgets that enhance Flutter's core functionality with added 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?

StyledWidgets are a set of widgets that can 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 a merge between a Container and a 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

StyledText is 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 is 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

StyledImage is 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 widgets in Flutter. Everything you can do with the Box widget, you can also do with FlexBox, HBox and VBox. However, the main difference is that you can specify flex attributes to them. 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

ZBox 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,
    ),
  ],
)