FlexBox (Flex)

This is equivalent to the Flex widget in Flutter. Everything you are able to do with the Box widget, you are able to do with FlexBox, however the main difference is that you can specify flex attributes to it.

Usage

FlexBox(
  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'),
    ),
  ],
)

HBox

Equivalent to Row widget, but also accepts Box styling attributes.

HBox(
  style: Style(
    $box.color.blue(),
    $flex.mainAxisAlignment.spaceBetween(),
  ),
  children: [...],
)

VBox

Equivalent to Column widget, but also accepts Box styling attributes.

VBox(
  style: Style(
    $box.color.blue(),
    $flex.mainAxisAlignment.spaceBetween(),
  ),
  children: [...],
)

Utilities

Flex utility provides an easy way to compose FlexSpecAttribute. The flex constant is an instance of the FlexSpecUtility class, serving as an entry point for building the styling attributes to your FlexBox.

direction

Control the axis along which the Flex, Row, or Column distributes space and positions its children.

// Set the direction to horizontal.
$flex.direction.horizontal();
 
// Set the direction to vertical.
$flex.direction.vertical();

mainAxisAlignment

Customize how children are aligned along the main axis.

// Align children at the start of the main axis.
$flex.mainAxisAlignment.start();
 
// Space children evenly across the main axis.
$flex.mainAxisAlignment.spaceEvenly();

crossAxisAlignment

Align children within the cross-axis of the flex container.

// Align children to the center of the cross axis.
$flex.crossAxisAlignment.center();
 
// Stretch children to fill the cross axis.
$flex.crossAxisAlignment.stretch();

mainAxisSize

Define the size of the main axis.

// Set the main axis to take only as much space as its children need.
$flex.mainAxisSize.min();
 
// Set the main axis to take as much space as available.
$flex.mainAxisSize.max();

verticalDirection

Specify the vertical ordering of children.

// Order children from top to bottom.
$flex.verticalDirection.up();
 
// Order children from bottom to top.
$flex.verticalDirection.down();

textDirection

Control the direction of text and children positioning if relevant.

// Set text and children positioning to left-to-right.
$flex.textDirection.ltr();
 
// Set text and children positioning to right-to-left.
$flex.textDirection.rtl();

textBaseline

Adjust the alignment of children relative to the text baseline.

// Align children by their alphabetic baseline.
$flex.textBaseline.alphabetic();
 
// Align children by their ideographic baseline.
$flex.textBaseline.ideographic();

clipBehavior

Define how the flex container should clip its content.

// Do not clip any overflow of children.
$flex.clipBehavior.none();
 
// Clip any overflow of children to the container's bounds.
$flex.clipBehavior.hardEdge();

gap

Set the space (gap) between each child in the flex container.

// Set a gap of 8 logical pixels between children.
$flex.gap(8);

Image Stack