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 use typed Styler APIs (for example, BoxStyler, TextStyler, and IconStyler) through their style property. This keeps styling explicit and composable. 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. See the Box reference for the full API.

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. See the FlexBox reference for the full API.

final flexStyle = FlexBoxStyler()
    .mainAxisAlignment(.spaceBetween)
    .color(Colors.blue)
    .direction(.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. See the StyledText reference for the full API.

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. See the StyledIcon reference for the full API.

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. See the StyledImage reference for the full API.

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

Callable Pattern

All Styler classes support a callable pattern — you can call a styler instance as a function to create its corresponding widget directly:

// BoxStyler creates a Box when called
final box = BoxStyler().color(Colors.blue).paddingAll(16);
box(child: Text('Hello'))  // Equivalent to Box(style: box, child: Text('Hello'))
 
// TextStyler creates a StyledText when called
final text = TextStyler().fontSize(18).color(Colors.white);
text('Hello')  // Equivalent to StyledText('Hello', style: text)
 
// IconStyler creates a StyledIcon when called
final icon = IconStyler().size(24).color(Colors.red);
icon(icon: Icons.star)  // Equivalent to StyledIcon(icon: Icons.star, style: icon)

This is useful for concise widget composition, especially when building reusable components.

Pressable and PressableBox

This is equivalent to Flutter’s GestureDetector, MouseRegion, and Focus widgets but with enhanced interaction state management and styling capabilities. See the Pressable reference for the full API.

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'),
  );