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

# SliverGrid

> Documentation for SliverGrid

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

export const sliverGridPreviewJson = {
  "type": "customScrollView",
  "slivers": [{
    "type": "sliverGrid",
    "crossAxisCount": 2,
    "mainAxisSpacing": 16,
    "crossAxisSpacing": 16,
    "childAspectRatio": 1,
    "children": [{
      "type": "container",
      "color": "#4CAF50",
      "child": {
        "type": "center",
        "child": {
          "type": "text",
          "data": "Grid Item 1",
          "style": {
            "color": "#FFFFFF",
            "fontWeight": "bold"
          }
        }
      }
    }, {
      "type": "container",
      "color": "#4CAF50",
      "child": {
        "type": "center",
        "child": {
          "type": "text",
          "data": "Grid Item 2",
          "style": {
            "color": "#FFFFFF",
            "fontWeight": "bold"
          }
        }
      }
    }, {
      "type": "container",
      "color": "#4CAF50",
      "child": {
        "type": "center",
        "child": {
          "type": "text",
          "data": "Grid Item 3",
          "style": {
            "color": "#FFFFFF",
            "fontWeight": "bold"
          }
        }
      }
    }, {
      "type": "container",
      "color": "#4CAF50",
      "child": {
        "type": "center",
        "child": {
          "type": "text",
          "data": "Grid Item 4",
          "style": {
            "color": "#FFFFFF",
            "fontWeight": "bold"
          }
        }
      }
    }]
  }]
};
export const sliverGridPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac **SliverGrid** allows you to build a Flutter `SliverGrid` widget using JSON.
It displays its children in a two-dimensional scrollable grid within a sliver
context.

To learn more about Flutter’s `SliverGrid`, refer to the
[official documentation](https://api.flutter.dev/flutter/widgets/SliverGrid-class.html).

## Properties

| Property               | Type                          | Description                                                                       |
| ---------------------- | ----------------------------- | --------------------------------------------------------------------------------- |
| crossAxisCount         | `int?`                        | Number of children in the cross axis (e.g. number of columns).                    |
| mainAxisSpacing        | `double?`                     | Space between children in the main axis. Defaults to `0.0`.                       |
| crossAxisSpacing       | `double?`                     | Space between children in the cross axis. Defaults to `0.0`.                      |
| childAspectRatio       | `double?`                     | Ratio of the cross-axis to the main-axis extent of each child. Defaults to `1.0`. |
| mainAxisExtent         | `double?`                     | Fixed extent of each child in the main axis.                                      |
| addAutomaticKeepAlives | `bool?`                       | Whether to add automatic keep-alives for children. Defaults to `true`.            |
| addRepaintBoundaries   | `bool?`                       | Whether to wrap children in repaint boundaries. Defaults to `true`.               |
| addSemanticIndexes     | `bool?`                       | Whether to add semantic indexes for children. Defaults to `true`.                 |
| children               | `List<Map<String, dynamic>>?` | The list of widgets rendered as grid items.                                       |

> ⚠️ **Note**
>
> `sliverGrid` must be placed **inside the `slivers` property of a `customScrollView`**.
> Each child of a `sliverGrid` must be a **box widget** (for example `container`,
> `card`, `column`, etc.), not another sliver.

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    const StacCustomScrollView(
      slivers: [
        StacSliverGrid(
          crossAxisCount: 2,
          mainAxisSpacing: 16,
          crossAxisSpacing: 16,
          childAspectRatio: 1,
          children: [
            StacContainer(
              color: StacColor('#4CAF50'),
              child: StacCenter(
                child: StacText(
                  data: 'Grid Item 1',
                  style: StacTextStyle(
                    color: StacColor('#FFFFFF'),
                    fontWeight: StacFontWeight.bold,
                  ),
                ),
              ),
            ),
            StacContainer(
              color: StacColor('#4CAF50'),
              child: StacCenter(
                child: StacText(
                  data: 'Grid Item 2',
                  style: StacTextStyle(
                    color: StacColor('#FFFFFF'),
                    fontWeight: StacFontWeight.bold,
                  ),
                ),
              ),
            ),
            StacContainer(
              color: StacColor('#4CAF50'),
              child: StacCenter(
                child: StacText(
                  data: 'Grid Item 3',
                  style: StacTextStyle(
                    color: StacColor('#FFFFFF'),
                    fontWeight: StacFontWeight.bold,
                  ),
                ),
              ),
            ),
            StacContainer(
              color: StacColor('#4CAF50'),
              child: StacCenter(
                child: StacText(
                  data: 'Grid Item 4',
                  style: StacTextStyle(
                    color: StacColor('#FFFFFF'),
                    fontWeight: StacFontWeight.bold,
                  ),
                ),
              ),
            ),
          ],
        ),
      ],
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "customScrollView",
      "slivers": [
        {
          "type": "sliverGrid",
          "crossAxisCount": 2,
          "mainAxisSpacing": 16,
          "crossAxisSpacing": 16,
          "childAspectRatio": 1,
          "children": [
            {
              "type": "container",
              "color": "#4CAF50",
              "child": {
                "type": "center",
                "child": {
                  "type": "text",
                  "data": "Grid Item 1",
                  "style": {
                    "color": "#FFFFFF",
                    "fontWeight": "bold"
                  }
                }
              }
            },
            {
              "type": "container",
              "color": "#4CAF50",
              "child": {
                "type": "center",
                "child": {
                  "type": "text",
                  "data": "Grid Item 2",
                  "style": {
                    "color": "#FFFFFF",
                    "fontWeight": "bold"
                  }
                }
              }
            },
            {
              "type": "container",
              "color": "#4CAF50",
              "child": {
                "type": "center",
                "child": {
                  "type": "text",
                  "data": "Grid Item 3",
                  "style": {
                    "color": "#FFFFFF",
                    "fontWeight": "bold"
                  }
                }
              }
            },
            {
              "type": "container",
              "color": "#4CAF50",
              "child": {
                "type": "center",
                "child": {
                  "type": "text",
                  "data": "Grid Item 4",
                  "style": {
                    "color": "#FFFFFF",
                    "fontWeight": "bold"
                  }
                }
              }
            }
          ]
        }
      ]
    }
    ```
  </Tab>

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

      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>