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

# Wrap

> Documentation for Wrap

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

export const wrapPreviewJson = {
  "type": "wrap",
  "spacing": 8,
  "runSpacing": 4,
  "children": [{
    "type": "container",
    "color": "#FFF44336",
    "width": 100,
    "height": 100,
    "child": {
      "type": "center",
      "child": {
        "type": "text",
        "data": "1",
        "style": {
          "color": "#FFFFFFFF"
        }
      }
    }
  }, {
    "type": "container",
    "color": "#FFE91E63",
    "width": 100,
    "height": 100,
    "child": {
      "type": "center",
      "child": {
        "type": "text",
        "data": "2",
        "style": {
          "color": "#FFFFFFFF"
        }
      }
    }
  }, {
    "type": "container",
    "color": "#FF9C27B0",
    "width": 100,
    "height": 100,
    "child": {
      "type": "center",
      "child": {
        "type": "text",
        "data": "3",
        "style": {
          "color": "#FFFFFFFF"
        }
      }
    }
  }, {
    "type": "container",
    "color": "#FF673AB7",
    "width": 100,
    "height": 100,
    "child": {
      "type": "center",
      "child": {
        "type": "text",
        "data": "4",
        "style": {
          "color": "#FFFFFFFF"
        }
      }
    }
  }]
};
export const wrapPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

## Properties

| Property           | Type                     | Description                                                                                                           |
| ------------------ | ------------------------ | --------------------------------------------------------------------------------------------------------------------- |
| direction          | `StacAxis`               | The direction to use as the main axis.                                                                                |
| alignment          | `StacWrapAlignment`      | How the children within a run should be placed in the main axis.                                                      |
| spacing            | `double`                 | How much space to place between children in a run in the main axis.                                                   |
| runAlignment       | `StacWrapAlignment`      | How the runs themselves should be placed in the cross axis.                                                           |
| runSpacing         | `double`                 | How much space to place between the runs themselves in the cross axis.                                                |
| crossAxisAlignment | `StacWrapCrossAlignment` | How the children within a run should be aligned relative to each other in the cross axis.                             |
| textDirection      | `StacTextDirection`      | Determines the order to lay children out horizontally and how to interpret start and end in the horizontal direction. |
| verticalDirection  | `StacVerticalDirection`  | Determines the order to lay children out vertically and how to interpret start and end in the vertical direction.     |
| clipBehavior       | `StacClip`               | The content will be clipped (or not) according to this option.                                                        |
| children           | `List<StacWidget>`       | The widgets below this widget in the tree.                                                                            |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacWrap(
      spacing: 8.0,
      runSpacing: 4.0,
      children: [
        StacContainer(
          color: StacColors.red,
          width: 100,
          height: 100,
          child: StacCenter(child: StacText(data: '1', style: StacTextStyle(color: StacColors.white))),
        ),
        StacContainer(
          color: StacColors.pink,
          width: 100,
          height: 100,
          child: StacCenter(child: StacText(data: '2', style: StacTextStyle(color: StacColors.white))),
        ),
        StacContainer(
          color: StacColors.purple,
          width: 100,
          height: 100,
          child: StacCenter(child: StacText(data: '3', style: StacTextStyle(color: StacColors.white))),
        ),
        StacContainer(
          color: StacColors.deepPurple,
          width: 100,
          height: 100,
          child: StacCenter(child: StacText(data: '4', style: StacTextStyle(color: StacColors.white))),
        ),
      ],
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "wrap",
      "spacing": 8,
      "runSpacing": 4,
      "children": [
        {
          "type": "container",
          "color": "#FFF44336",
          "width": 100,
          "height": 100,
          "child": {
            "type": "center",
            "child": {
              "type": "text",
              "data": "1",
              "style": {
                "color": "#FFFFFFFF"
              }
            }
          }
        },
        {
          "type": "container",
          "color": "#FFE91E63",
          "width": 100,
          "height": 100,
          "child": {
            "type": "center",
            "child": {
              "type": "text",
              "data": "2",
              "style": {
                "color": "#FFFFFFFF"
              }
            }
          }
        },
        {
          "type": "container",
          "color": "#FF9C27B0",
          "width": 100,
          "height": 100,
          "child": {
            "type": "center",
            "child": {
              "type": "text",
              "data": "3",
              "style": {
                "color": "#FFFFFFFF"
              }
            }
          }
        },
        {
          "type": "container",
          "color": "#FF673AB7",
          "width": 100,
          "height": 100,
          "child": {
            "type": "center",
            "child": {
              "type": "text",
              "data": "4",
              "style": {
                "color": "#FFFFFFFF"
              }
            }
          }
        }
      ]
    }
    ```
  </Tab>

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

      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>