> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stac.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Stack

> Documentation for Stack

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const stackPreviewJson = {
  "type": "stack",
  "alignment": "center",
  "clipBehavior": "antiAlias",
  "fit": "expand",
  "textDirection": "ltr",
  "children": [{
    "type": "text",
    "data": "Hello, World!"
  }, {
    "type": "container",
    "width": 100,
    "height": 100,
    "color": "#FF0000"
  }]
};
export const stackPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac Stack allows you to build a Flutter stack widget using JSON.
To know more about the stack widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Stack-class.html).

## Properties

| Property      | Type                | Description                                                                                              |
| ------------- | ------------------- | -------------------------------------------------------------------------------------------------------- |
| alignment     | `StacAlignment`     | How to align the non-positioned and partially-positioned children. Defaults to `StacAlignment.topStart`. |
| clipBehavior  | `StacClip`          | How to clip the content. Defaults to `StacClip.hardEdge`.                                                |
| fit           | `StacStackFit`      | How to size the non-positioned children. Defaults to `StacStackFit.loose`.                               |
| textDirection | `StacTextDirection` | The text direction to use for resolving alignment.                                                       |
| children      | `List<StacWidget>`  | The list of widgets to display inside the stack. Defaults to an empty list.                              |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacStack(
      alignment: StacAlignment.center,
      clipBehavior: StacClip.antiAlias,
      fit: StacStackFit.expand,
      textDirection: StacTextDirection.ltr,
      children: [
        StacText(data: 'Hello, World!'),
        StacContainer(width: 100, height: 100, color: StacColors.red),
      ],
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "stack",
      "alignment": "center",
      "clipBehavior": "antiAlias",
      "fit": "expand",
      "textDirection": "ltr",
      "children": [
        {
          "type": "text",
          "data": "Hello, World!"
        },
        {
          "type": "container",
          "width": 100,
          "height": 100,
          "color": "#FF0000"
        }
      ]
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={stackPreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: stackPreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>