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

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

<CodeGroup>
  ```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,
      ),
    ),
  )
  ```

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


Built with [Mintlify](https://mintlify.com).