FlexBox (Flex)

This is equivalent to the Flex widget 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.

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

is equivalent to the Row widget, but it also accepts Box styling attributes.

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

VBox

is equivalent to the Column widget, but it also accepts Box styling attributes.

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

Utilities

The Flex utility provides an easy way to compose FlexSpecAttribute. The $flex variable is an instance of the FlexSpecUtility class, serving as an entry point for building the styling attributes for StyledFlex, StyledRow, StyledColumn, FlexBox, HBox, and VBox.

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