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

# Vertical Divider

> Documentation for Vertical Divider

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

export const verticalDividerPreviewJson = {
  "type": "verticalDivider",
  "width": 20,
  "thickness": 4,
  "indent": 10,
  "endIndent": 10,
  "color": "#21814C"
};
export const verticalDividerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac Vertical Divider allows you to build a Flutter vertical divider widget using JSON.
To know more about the vertical divider widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/VerticalDivider-class.html).

## Properties

| Property  | Type          | Description                                           |
| --------- | ------------- | ----------------------------------------------------- |
| width     | `StacDouble?` | The width of the divider.                             |
| thickness | `StacDouble?` | The thickness of the divider.                         |
| indent    | `StacDouble?` | The amount of space to indent the divider.            |
| endIndent | `StacDouble?` | The amount of space to indent the divider at the end. |
| color     | `String?`     | The color of the divider.                             |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacVerticalDivider(
      width: 20,
      thickness: 4,
      indent: 10,
      endIndent: 10,
      color: '#21814C',
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "verticalDivider",
      "width": 20,
      "thickness": 4,
      "indent": 10,
      "endIndent": 10,
      "color": "#21814C"
    }
    ```
  </Tab>

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

      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>