StyleWidgets

Mix is designed to extend Flutter’s core capabilities by introducing a set of enhanced widgets known as StyleWidgets. These widgets seamlessly integrate with Flutter’s familiar workflow, but add powerful styling features that make it easier to build composable and expressive UIs.

At the heart of this system, StyleWidgets accept a Style object as a parameter. This object lets you define a wide range of visual attributes—such as color, padding, margin, and more—in a clear and composable way. Among these, the most commonly used is the Box widget, which is equivalent to Flutter’s Container.

Prebuilt StyleWidgets

To make styling even more convenient, Mix provides a collection of prebuilt StyleWidgets. These widgets are designed to cover the most common UI needs and each comes with its own style property, allowing you to apply Mix styles directly and consistently.

Box

As already mentioned, the Box widget is like Flutter’s Container, it can be styled with BoxStyler. Learn more here.

final style = BoxStyler()
  .size(100, 100)
  .color(Colors.blue);
 
Box(
  style: style,
);

FlexBox, ColumnBox and RowBox

These are equivalent to the Flex, Column and Row widgets wrapped with a Container, they can be styled with FlexBoxStyler. Learn more here.

final flexStyle = FlexBoxStyler()
    .mainAxisAlignment(MainAxisAlignment.spaceBetween)
    .color(Colors.blue)
    .direction(Axis.vertical);
 
FlexBox(
  style: flexStyle,
  children: [Text('Item 1'), Text('Item 2'), Text('Item 3')],
);

StyledText

StyledText is equivalent to Flutter’s Text widget, it can be styled with TextStyler. Learn more here.

final style = TextStyler()
  .color(Colors.blue)
  .fontSize(20);
 
StyledText(
  'Hello, World!',
  style: style,
)

StyledIcon

StyledIcon is equivalent to Flutter’s Icon widget, it can be styled with IconStyler. Learn more here.

final iconStyle = IconStyler()
  .color(Colors.blue)
  .size(30);
 
StyledIcon(icon: Icons.ac_unit, style: iconStyle);

StyledImage

StyledImage is equivalent to Flutter’s Image widget, it can be styled with ImageStyler. Learn more here.

final imageStyle = ImageStyler()
  .width(200)
  .height(150);
 
StyledImage(
  image: NetworkImage('https://example.com/image.png'),
  style: imageStyle,
);

Pressable and PressableBox

This is equivalent to Flutter’s GestureDetector, MouseRegion, and Focus widgets but with enhanced interaction state management and styling capabilities. Learn more here.

Pressable(
  onPress: () => print('Pressed'),
  onLongPress: () => print('Long pressed'),
  onFocusChange: (focused) => print('Focus: $focused'),
  autofocus: true,
  child: StyledText('Interactive Button'),
);

  PressableBox(
    style: BoxStyler()
      .color(Colors.blue)
      .paddingAll(16)
      .borderRounded(8),
    onPress: () => print('PressableBox pressed'),
    child: StyledText('Styled Button'),
  );