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

# Padding

> Documentation for Padding

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

export const paddingPreviewJson = {
  "type": "padding",
  "padding": {
    "left": 0,
    "right": 0
  },
  "child": {
    "type": "container",
    "color": "#672BFF",
    "clipBehavior": "hardEdge",
    "height": 75,
    "width": 700
  }
};
export const paddingPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

## Properties

| Property | Type             | Description                                                                                                                                                                                                             |
| -------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| padding  | `StacEdgeInsets` | The amount of space by which to inset the child. Examples: `"padding": 12` for uniform padding, `"padding": {"left": 0, "right": 0}` for specific sides, or `{"padding": [8, 12, 8, 12]}` for left, top, right, bottom. |
| child    | `StacWidget`     | The widget below this widget in the tree.                                                                                                                                                                               |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacPadding(
      padding: StacEdgeInsets(left: 0, right: 0),
      child: StacContainer(
        color: '#672BFF',
        clipBehavior: StacClip.hardEdge,
        height: 75,
        width: 700,
      ),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "padding",
      "padding": {
        "left": 0,
        "right": 0
      },
      "child": {
        "type": "container",
        "color": "#672BFF",
        "clipBehavior": "hardEdge",
        "height": 75,
        "width": 700
      }
    }
    ```
  </Tab>

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

      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>