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

# Divider

> Documentation for Divider

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

export const dividerPreviewJson = {
  "type": "divider",
  "thickness": 2,
  "color": "#FF0000",
  "indent": 16,
  "endIndent": 16
};
export const dividerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac Divider allows you to build a Flutter Divider widget using JSON. It creates a thin horizontal line with padding on either side.
To know more about the Divider widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Divider-class.html).

## Properties

| Property  | Type        | Description                                         |
| --------- | ----------- | --------------------------------------------------- |
| height    | `double`    | The divider's height extent (total space occupied). |
| thickness | `double`    | The thickness of the line drawn within the divider. |
| indent    | `double`    | The amount of empty space to the leading edge.      |
| endIndent | `double`    | The amount of empty space to the trailing edge.     |
| color     | `StacColor` | The color to use when painting the line.            |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacDivider(
      thickness: 2.0,
      color: StacColors.red,
      indent: 16.0,
      endIndent: 16.0,
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "divider",
      "thickness": 2,
      "color": "#FF0000",
      "indent": 16,
      "endIndent": 16
    }
    ```
  </Tab>

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

      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>

## Divider in a List

<CodeGroup>
  ```dart Dart theme={null}
  StacColumn(
    children: [
      StacListTile(
        title: StacText(data: 'Item 1'),
      ),
      StacDivider(
        height: 1.0,
        thickness: 1.0,
        color: StacColors.grey,
      ),
      StacListTile(
        title: StacText(data: 'Item 2'),
      ),
      StacDivider(
        height: 1.0,
        thickness: 1.0,
        color: StacColors.grey,
      ),
      StacListTile(
        title: StacText(data: 'Item 3'),
      ),
    ],
  )
  ```

  ```json JSON theme={null}
  {
    "type": "column",
    "children": [
      {
        "type": "listTile",
        "title": { "type": "text", "data": "Item 1" }
      },
      {
        "type": "divider",
        "height": 1.0,
        "thickness": 1.0,
        "color": "#E0E0E0"
      },
      {
        "type": "listTile",
        "title": { "type": "text", "data": "Item 2" }
      },
      {
        "type": "divider",
        "height": 1.0,
        "thickness": 1.0,
        "color": "#E0E0E0"
      },
      {
        "type": "listTile",
        "title": { "type": "text", "data": "Item 3" }
      }
    ]
  }
  ```
</CodeGroup>