ZBox (Stack)

ZBox is a composite styled widget that combines the layout capabilities of a Box with the stacking functionality of StyledStack. It is designed for use cases where you need a styled stacking layout, encapsulated within a box-shaped container with alignment and other style properties.

Usage

To use ZBox, create an instance and provide it with a style and a list of widgets for your stacked layout:

ZBox(
  style: Style(
    $stack.alignment.bottomLeft(),
    $stack.fit.loose(),
    $box.width(300),
    $box.height(300),
    $box.color.blue(),
  ),
  children: [...],
);

Utilities

The $stack variable is an instance of StackSpecUtility, which facilitates the construction of StackSpecAttribute objects. These objects are used to style and manage the visuals of ZBox and StyledStack.

alignment

This utility aligns layers within the stacked layout:

// Align at the bottom center of the stack
$stack.alignment.bottomCenter();
 
// Align at the top right of the stack
$stack.alignment.topRight();

fit

This utility determines how layers are sized within the stack:

// StackFit.loose
$stack.fit.loose();
 
// StackFit.expand
$stack.fit.expand();

textDirection

This utility indicates the text direction in the stack for correct placement of elements:

// Left-to-right text direction
$stack.textDirection.ltr();
 
// Right-to-left text direction
$stack.textDirection.rtl();

clipBehavior

This utility controls how children outside the stack's bounds are clipped:

// Clip.hardEdge
$stack.clipBehavior.hardEdge();
 
// Clip.none
$stack.clipBehavior.none();