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

# Visibility

> Documentation for Visibility

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

export const visibilityPreviewJson = {
  "type": "visibility",
  "child": {
    "type": "text",
    "data": "I am visible!"
  },
  "visible": true
};
export const visibilityPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

***

## Properties

| Property                | Type         | Description                                                                                       |
| ----------------------- | ------------ | ------------------------------------------------------------------------------------------------- |
| `child`                 | `StacWidget` | The widget to be displayed when `visible` is `true`.                                              |
| `replacement`           | `StacWidget` | The widget to display when `visible` is `false`. Defaults to an empty widget (`SizedBox.shrink`). |
| `visible`               | `bool`       | Whether the child is visible. Defaults to `true`.                                                 |
| `maintainState`         | `bool`       | Whether to maintain the state of the widget when it is hidden. Defaults to `false`.               |
| `maintainAnimation`     | `bool`       | Whether to maintain the animation of the widget when it is hidden. Defaults to `false`.           |
| `maintainSize`          | `bool`       | Whether to maintain the size of the widget when it is hidden. Defaults to `false`.                |
| `maintainSemantics`     | `bool`       | Whether to maintain the semantics of the widget when it is hidden. Defaults to `false`.           |
| `maintainInteractivity` | `bool`       | Whether to maintain the interactivity of the widget when it is hidden. Defaults to `false`.       |

***

## Example

### Example 1: Basic Visibility

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacVisibility(
      child: StacText(data: 'I am visible!'),
      visible: true,
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "visibility",
      "child": {
        "type": "text",
        "data": "I am visible!"
      },
      "visible": true
    }
    ```
  </Tab>

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

      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: Hidden with Replacement

<CodeGroup>
  ```dart Dart theme={null}
  StacVisibility(
    child: StacText(data: 'I am hidden!'),
    replacement: StacContainer(color: '#FF5733', width: 50, height: 50),
    visible: false,
  )
  ```

  ```json JSON theme={null}
  {
    "type": "visibility",
    "child": {
      "type": "text",
      "data": "I am hidden!"
    },
    "replacement": {
      "type": "container",
      "color": "#FF5733",
      "width": 50,
      "height": 50
    },
    "visible": false
  }
  ```
</CodeGroup>