FlexBox

This is equivalent to the Flex wrapped in Container widgets in Flutter. Everything you can do with the Box widget, you can also do with FlexBox. However, the main difference is that you can specify flex attributes for it.

FlexBox(
  style: FlexBoxStyler()
      .color(Colors.blue)
      .direction(Axis.horizontal)
      .mainAxisAlignment(MainAxisAlignment.spaceBetween),
  children: [
    Box(child: Text('Box 1')),
    Box(child: Text('Box 2')),
    Box(child: Text('Box 3')),
  ],
);

RowBox and ColumnBox

If you want to quickly set the direction of your flex container, you can use RowBox or ColumnBox. These widgets work just like Flutter’s Row and Column, but with the added bonus that you can style them using all the same options as Box. This makes them perfect when you want to lock in a horizontal or vertical layout and still take advantage of powerful styling features.

RowBox(
  style: FlexBoxStyler()
      .color(Colors.blue)
      .mainAxisAlignment(MainAxisAlignment.spaceBetween),
  children: [...],
);

ColumnBox(
  style: FlexBoxStyler()
      .color(Colors.blue)
      .mainAxisAlignment(MainAxisAlignment.spaceBetween),
  children: [...],
);

Constructor

Style API Reference

Mix provides an extension of Style<FlexBoxSpec> called FlexBoxStyler for easily styling FlexBox, RowBox, and ColumnBox widgets.