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

# SliverList

> Documentation for SliverList

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

export const sliverListPreviewJson = {
  "type": "scaffold",
  "body": {
    "type": "customScrollView",
    "slivers": [{
      "type": "sliverList",
      "children": [{
        "type": "container",
        "height": 80,
        "color": "primary",
        "child": {
          "type": "center",
          "child": {
            "type": "text",
            "data": "List Item 1"
          }
        }
      }, {
        "type": "container",
        "height": 80,
        "color": "secondary",
        "child": {
          "type": "center",
          "child": {
            "type": "text",
            "data": "List Item 2"
          }
        }
      }, {
        "type": "container",
        "height": 80,
        "color": "success",
        "child": {
          "type": "center",
          "child": {
            "type": "text",
            "data": "List Item 3"
          }
        }
      }]
    }]
  }
};
export const sliverListPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac SliverList allows you to build a Flutter sliver list widget using JSON.
It displays its children in a linear, scrollable list within a sliver context.

This widget must be used inside a `CustomScrollView`.
To learn more about the SliverList widget in Flutter, refer to the
[official documentation](https://api.flutter.dev/flutter/widgets/SliverList-class.html).

## Properties

| Property               | Type                          | Description                                                                             |
| ---------------------- | ----------------------------- | --------------------------------------------------------------------------------------- |
| children               | `List<Map<String, dynamic>>?` | The list of widgets to display in the sliver list. Each child must be a box widget.     |
| addAutomaticKeepAlives | `bool?`                       | Whether to add automatic keep-alives for the children. Defaults to `true`.              |
| addRepaintBoundaries   | `bool?`                       | Whether to wrap children in repaint boundaries. Defaults to `true`.                     |
| addSemanticIndexes     | `bool?`                       | Whether to add semantic indexes for the children. Defaults to `true`.                   |
| semanticIndexOffset    | `int?`                        | An offset added to each child’s semantic index. Useful when combining multiple slivers. |

> **Note**
>
> Children of `SliverList` must be **box widgets** (for example `Container`, `Text`, etc.).
> To apply padding, opacity, or other sliver-level effects, wrap the `SliverList`
> with widgets such as `SliverPadding` or `SliverOpacity`.

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    const StacSliverList(
      children: [
        StacContainer(
          height: 80,
          color: StacColor.primary,
          child: StacCenter(
            child: StacText(data: 'List Item 1'),
          ),
        ),
        StacContainer(
          height: 80,
          color: StacColor.secondary,
          child: StacCenter(
            child: StacText(data: 'List Item 2'),
          ),
        ),
        StacContainer(
          height: 80,
          color: StacColor.success,
          child: StacCenter(
            child: StacText(data: 'List Item 3'),
          ),
        ),
      ],
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "scaffold",
      "body": {
        "type": "customScrollView",
        "slivers": [
          {
            "type": "sliverList",
            "children": [
              {
                "type": "container",
                "height": 80,
                "color": "primary",
                "child": {
                  "type": "center",
                  "child": {
                    "type": "text",
                    "data": "List Item 1"
                  }
                }
              },
              {
                "type": "container",
                "height": 80,
                "color": "secondary",
                "child": {
                  "type": "center",
                  "child": {
                    "type": "text",
                    "data": "List Item 2"
                  }
                }
              },
              {
                "type": "container",
                "height": 80,
                "color": "success",
                "child": {
                  "type": "center",
                  "child": {
                    "type": "text",
                    "data": "List Item 3"
                  }
                }
              }
            ]
          }
        ]
      }
    }
    ```
  </Tab>

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

      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>