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

# Limited Box

> Documentation for Limited Box

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

export const limitedBoxPreviewJson = {
  "type": "limitedBox",
  "child": {
    "type": "container",
    "width": 100,
    "height": 100,
    "color": "#FF0000"
  }
};
export const limitedBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

## Properties

| Property    | Type         | Description                                                                                          |
| ----------- | ------------ | ---------------------------------------------------------------------------------------------------- |
| `maxHeight` | `double`     | The maximum height for the child if the parent's height is unbounded. Defaults to `double.infinity`. |
| `maxWidth`  | `double`     | The maximum width for the child if the parent's width is unbounded. Defaults to `double.infinity`.   |
| `child`     | `StacWidget` | The child widget represented as a JSON object.                                                       |

***

## Example

### Example 1: Limited Box with Default Constraints

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacLimitedBox(
      child: StacContainer(
        width: 100,
        height: 100,
        color: StacColors.red,
      ),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "limitedBox",
      "child": {
        "type": "container",
        "width": 100,
        "height": 100,
        "color": "#FF0000"
      }
    }
    ```
  </Tab>

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

      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>

### Example 2: Limited Box with Custom Constraints

<CodeGroup>
  ```dart Dart theme={null}
  StacLimitedBox(
    maxHeight: 200.0,
    maxWidth: 300.0,
    child: StacText(
      data: 'Hello, World! from Limited Box',
      style: StacTextStyle(fontSize: 16, color: StacColors.black),
    ),
  )
  ```

  ```json JSON theme={null}
  {
    "type": "limitedBox",
    "maxHeight": 200.0,
    "maxWidth": 300.0,
    "child": {
      "type": "text",
      "data": "Hello, World! from Limited Box",
      "style": {
        "fontSize": 16,
        "color": "#000000"
      }
    }
  }
  ```
</CodeGroup>