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

# SliverSafeArea

> Documentation for SliverSafeArea

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

export const sliverSafeAreaPreviewJson = {
  "type": "scaffold",
  "body": {
    "type": "customScrollView",
    "slivers": [{
      "type": "sliverSafeArea",
      "top": true,
      "sliver": {
        "type": "sliverToBoxAdapter",
        "child": {
          "type": "text",
          "data": "Hello World"
        }
      }
    }]
  }
};
export const sliverSafeAreaPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

## Properties

| Property | Type                    | Description                                                     |
| -------- | ----------------------- | --------------------------------------------------------------- |
| left     | `bool?`                 | Whether to avoid intrusions on the left. Defaults to `true`.    |
| top      | `bool?`                 | Whether to avoid intrusions at the top. Defaults to `true`.     |
| right    | `bool?`                 | Whether to avoid intrusions on the right. Defaults to `true`.   |
| bottom   | `bool?`                 | Whether to avoid intrusions at the bottom. Defaults to `true`.  |
| minimum  | `Map<String, dynamic>?` | Minimum padding to apply as edge insets.                        |
| sliver   | `Map<String, dynamic>`  | The sliver widget below this widget in the tree. **(Required)** |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacSliverSafeArea(
      top: true,
      sliver: StacSliverToBoxAdapter(
        child: StacText(data: 'Hello World'),
      ),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "scaffold",
      "body": {
        "type": "customScrollView",
        "slivers": [
          {
            "type": "sliverSafeArea",
            "top": true,
            "sliver": {
              "type": "sliverToBoxAdapter",
              "child": {
                "type": "text",
                "data": "Hello World"
              }
            }
          }
        ]
      }
    }
    ```
  </Tab>

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

      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>