Skip to main content
The Stac Alignment class represents a point within a rectangle. It’s used to align child widgets within their parent.

​
Available Values

ValueDescription
topLeftTop-left corner of the rectangle.
topCenterCenter of the top edge.
topRightTop-right corner of the rectangle.
centerLeftCenter of the left edge.
centerCenter of the rectangle.
centerRightCenter of the right edge.
bottomLeftBottom-left corner of the rectangle.
bottomCenterCenter of the bottom edge.
bottomRightBottom-right corner of the rectangle.

​
Example

StacAlign(
  alignment: StacAlignment.center,
  child: StacText(data: 'Centered'),
)

​
Alignment Examples

​
Top Alignments

// Top Left
StacAlign(
  alignment: StacAlignment.topLeft,
  child: StacText(data: 'Top Left'),
)

// Top Center
StacAlign(
  alignment: StacAlignment.topCenter,
  child: StacText(data: 'Top Center'),
)

// Top Right
StacAlign(
  alignment: StacAlignment.topRight,
  child: StacText(data: 'Top Right'),
)

​
With Container

StacContainer(
  width: 200.0,
  height: 200.0,
  color: StacColors.grey,
  alignment: StacAlignment.bottomRight,
  child: StacText(data: 'Bottom Right'),
)

​
With Stack Positioned

StacStack(
  children: [
    StacContainer(color: StacColors.blue),
    StacAlign(
      alignment: StacAlignment.center,
      child: StacText(
        data: 'Overlay Text',
        style: StacTextStyle(color: StacColors.white),
      ),
    ),
  ],
)
For text-direction-aware alignment (RTL support), use StacAlignmentDirectional instead.