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

# SliverFillRemaining

> Documentation for SliverFillRemaining

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

export const sliverFillRemainingPreviewJson = {
  "type": "scaffold",
  "body": {
    "type": "customScrollView",
    "slivers": [{
      "type": "sliverFillRemaining",
      "hasScrollBody": false,
      "child": {
        "type": "center",
        "child": {
          "type": "text",
          "data": "This content fills the remaining space"
        }
      }
    }]
  }
};
export const sliverFillRemainingPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac SliverFillRemaining allows you to build a Flutter `SliverFillRemaining`
widget using JSON.

It fills the remaining space in a `CustomScrollView` after all preceding slivers
have been laid out. This widget is commonly used for empty states, footers,
or centered content.

To learn more about the SliverFillRemaining widget in Flutter, refer to the
[official documentation](https://api.flutter.dev/flutter/widgets/SliverFillRemaining-class.html).

## Properties

| Property       | Type                    | Description                                                                         |
| -------------- | ----------------------- | ----------------------------------------------------------------------------------- |
| child          | `Map<String, dynamic>?` | The widget to display in the remaining space.                                       |
| hasScrollBody  | `bool`                  | Whether the child has a scrollable body. Defaults to `true`.                        |
| fillOverscroll | `bool`                  | Whether the sliver should stretch to fill the overscroll area. Defaults to `false`. |

> **Note**
>
> `SliverFillRemaining` is typically placed **at the end** of a `CustomScrollView`
> to ensure it fills the remaining viewport space correctly.

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    const StacSliverFillRemaining(
      hasScrollBody: false,
      child: StacCenter(
        child: StacText(data: 'This content fills the remaining space'),
      ),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "scaffold",
      "body": {
        "type": "customScrollView",
        "slivers": [
          {
            "type": "sliverFillRemaining",
            "hasScrollBody": false,
            "child": {
              "type": "center",
              "child": {
                "type": "text",
                "data": "This content fills the remaining space"
              }
            }
          }
        ]
      }
    }
    ```
  </Tab>

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

      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>