> ## 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.

# Container

> Documentation for Container

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

export const containerPreviewJson = {
  "type": "container",
  "alignment": "center",
  "padding": {
    "top": 16,
    "bottom": 16,
    "left": 16,
    "right": 16
  },
  "decoration": {
    "color": "#FF5733",
    "borderRadius": {
      "topLeft": 16,
      "topRight": 16,
      "bottomLeft": 16,
      "bottomRight": 16
    }
  },
  "width": 200,
  "height": 200,
  "child": {
    "type": "text",
    "data": "Hello, World!",
    "style": {
      "color": "#FFFFFF",
      "fontSize": 24
    }
  }
};
export const containerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

## Properties

| Property             | Type                 | Description                                       |
| -------------------- | -------------------- | ------------------------------------------------- |
| alignment            | `StacAlignment`      | The alignment of the child within the container.  |
| padding              | `StacEdgeInsets`     | The padding to apply around the child.            |
| decoration           | `StacBoxDecoration`  | The decoration to paint behind the child.         |
| foregroundDecoration | `StacBoxDecoration`  | The decoration to paint in front of the child.    |
| color                | `StacColor`          | The color to paint behind the child.              |
| width                | `double`             | The width of the container.                       |
| height               | `double`             | The height of the container.                      |
| constraints          | `StacBoxConstraints` | Additional constraints to apply to the container. |
| margin               | `StacEdgeInsets`     | The margin to apply around the container.         |
| transformAlignment   | `StacAlignment`      | The alignment of the transform origin.            |
| child                | `StacWidget`         | The child widget of the container.                |
| clipBehavior         | `StacClip`           | The clip behavior of the container.               |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacContainer(
      alignment: StacAlignment.center,
      padding: StacEdgeInsets(
        top: 16.0,
        bottom: 16.0,
        left: 16.0,
        right: 16.0,
      ),
      decoration: StacBoxDecoration(
        color: '#FF5733',
        borderRadius: StacBorderRadius(
          topLeft: 16.0,
          topRight: 16.0,
          bottomLeft: 16.0,
          bottomRight: 16.0,
        ),
      ),
      width: 200.0,
      height: 200.0,
      child: StacText(
        data: 'Hello, World!',
        style: StacTextStyle(
          color: StacColors.white,
          fontSize: 24.0,
        ),
      ),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "container",
      "alignment": "center",
      "padding": {
        "top": 16,
        "bottom": 16,
        "left": 16,
        "right": 16
      },
      "decoration": {
        "color": "#FF5733",
        "borderRadius": {
          "topLeft": 16,
          "topRight": 16,
          "bottomLeft": 16,
          "bottomRight": 16
        }
      },
      "width": 200,
      "height": 200,
      "child": {
        "type": "text",
        "data": "Hello, World!",
        "style": {
          "color": "#FFFFFF",
          "fontSize": 24
        }
      }
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={containerPreviewSrc}
        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: containerPreviewJson
      };

      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>