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

# RefreshIndicator

> Documentation for RefreshIndicator

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

export const refreshIndicatorPreviewJson = {
  "type": "refreshIndicator",
  "onRefresh": {
    "actionType": "request",
    "url": "https://raw.githubusercontent.com/StacDev/stac/main/examples/stac_gallery/assets/json/list_view_example.json",
    "method": "get",
    "contentType": "application/json"
  },
  "child": {
    "type": "listView",
    "children": [{
      "type": "listTile",
      "title": {
        "type": "text",
        "data": "Pull down to refresh"
      }
    }, {
      "type": "listTile",
      "title": {
        "type": "text",
        "data": "Item 1"
      }
    }, {
      "type": "listTile",
      "title": {
        "type": "text",
        "data": "Item 2"
      }
    }, {
      "type": "listTile",
      "title": {
        "type": "text",
        "data": "Item 3"
      }
    }]
  }
};
export const refreshIndicatorPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

## Properties

| Property        | Type                              | Description                                                                                                                              |
| --------------- | --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| child           | `StacWidget`                      | The widget below this widget in the tree.                                                                                                |
| displacement    | `double`                          | The distance from the child's top or bottom edge to where the refresh indicator starts. Defaults to `40`.                                |
| edgeOffset      | `double`                          | The offset where the indicator starts. Defaults to `0`.                                                                                  |
| onRefresh       | `StacAction`                      | The callback that is called when the user has dragged the refresh indicator far enough to demonstrate that they want the app to refresh. |
| color           | `StacColor`                       | The color of the refresh indicator.                                                                                                      |
| backgroundColor | `StacColor`                       | The background color of the refresh indicator.                                                                                           |
| semanticsLabel  | `String`                          | The semantic label for the refresh indicator.                                                                                            |
| semanticsValue  | `String`                          | The semantic value for the refresh indicator.                                                                                            |
| strokeWidth     | `double`                          | The width of the refresh indicator's stroke. Defaults to `RefreshProgressIndicator.defaultStrokeWidth`.                                  |
| triggerMode     | `StacRefreshIndicatorTriggerMode` | The mode that controls when the refresh indicator will be triggered. Defaults to `RefreshIndicatorTriggerMode.onEdge`.                   |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacRefreshIndicator(
      onRefresh: StacNetworkRequestAction(
        url: 'https://raw.githubusercontent.com/StacDev/stac/main/examples/stac_gallery/assets/json/list_view_example.json',
        method: Method.get,
        contentType: 'application/json',
      ),
      child: StacListView(
        children: [
          StacListTile(title: StacText(data: 'Pull down to refresh')),
          StacListTile(title: StacText(data: 'Item 1')),
          StacListTile(title: StacText(data: 'Item 2')),
          StacListTile(title: StacText(data: 'Item 3')),
        ],
      ),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "refreshIndicator",
      "onRefresh": {
        "actionType": "request",
        "url": "https://raw.githubusercontent.com/StacDev/stac/main/examples/stac_gallery/assets/json/list_view_example.json",
        "method": "get",
        "contentType": "application/json"
      },
      "child": {
        "type": "listView",
        "children": [
          {
            "type": "listTile",
            "title": {
              "type": "text",
              "data": "Pull down to refresh"
            }
          },
          {
            "type": "listTile",
            "title": {
              "type": "text",
              "data": "Item 1"
            }
          },
          {
            "type": "listTile",
            "title": {
              "type": "text",
              "data": "Item 2"
            }
          },
          {
            "type": "listTile",
            "title": {
              "type": "text",
              "data": "Item 3"
            }
          }
        ]
      }
    }
    ```
  </Tab>

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

      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>