Alignment - Stac

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

Available Values

Value	Description
`topLeft`	Top-left corner of the rectangle.
`topCenter`	Center of the top edge.
`topRight`	Top-right corner of the rectangle.
`centerLeft`	Center of the left edge.
`center`	Center of the rectangle.
`centerRight`	Center of the right edge.
`bottomLeft`	Bottom-left corner of the rectangle.
`bottomCenter`	Center of the bottom edge.
`bottomRight`	Bottom-right corner of the rectangle.

Example

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

{
  "type": "align",
  "alignment": "center",
  "child": {
    "type": "text",
    "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'),
)

// Top Left
{
  "type": "align",
  "alignment": "topLeft",
  "child": { "type": "text", "data": "Top Left" }
}

// Top Center
{
  "type": "align",
  "alignment": "topCenter",
  "child": { "type": "text", "data": "Top Center" }
}

// Top Right
{
  "type": "align",
  "alignment": "topRight",
  "child": { "type": "text", "data": "Top Right" }
}

With Container

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

{
  "type": "container",
  "width": 200.0,
  "height": 200.0,
  "color": "#E0E0E0",
  "alignment": "bottomRight",
  "child": {
    "type": "text",
    "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),
      ),
    ),
  ],
)

{
  "type": "stack",
  "children": [
    { "type": "container", "color": "#2196F3" },
    {
      "type": "align",
      "alignment": "center",
      "child": {
        "type": "text",
        "data": "Overlay Text",
        "style": { "color": "#FFFFFF" }
      }
    }
  ]
}

For text-direction-aware alignment (RTL support), use StacAlignmentDirectional instead.