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

# PageView

> Documentation for PageView

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

export const pageViewPreviewJson = {
  "type": "pageView",
  "children": [{
    "type": "container",
    "color": "#D9D9D9",
    "child": {
      "type": "center",
      "child": {
        "type": "text",
        "data": "Page 1",
        "style": {
          "fontSize": 23,
          "fontWeight": "w400"
        }
      }
    }
  }, {
    "type": "container",
    "color": "#FC3F1B",
    "child": {
      "type": "center",
      "child": {
        "type": "text",
        "data": "Page 2",
        "style": {
          "fontSize": 23,
          "fontWeight": "w400"
        }
      }
    }
  }, {
    "type": "container",
    "color": "#D9D9D9",
    "child": {
      "type": "center",
      "child": {
        "type": "text",
        "data": "Page 3",
        "style": {
          "fontSize": 23,
          "fontWeight": "w400"
        }
      }
    }
  }]
};
export const pageViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

## Properties

| Property               | Type                    | Description                                                                   |
| ---------------------- | ----------------------- | ----------------------------------------------------------------------------- |
| scrollDirection        | `StacAxis`              | The axis along which the page view scrolls. Defaults to `Axis.horizontal`.    |
| reverse                | `bool`                  | Whether the page view scrolls in the reverse direction. Defaults to `false`.  |
| physics                | `StacScrollPhysics`     | The physics for the scroll view.                                              |
| pageSnapping           | `bool`                  | Whether the page view should snap to page boundaries. Defaults to `true`.     |
| onPageChanged          | `StacAction`            | The callback that is called when the page changes.                            |
| dragStartBehavior      | `StacDragStartBehavior` | The drag start behavior. Defaults to `DragStartBehavior.start`.               |
| allowImplicitScrolling | `bool`                  | Whether to allow implicit scrolling. Defaults to `false`.                     |
| restorationId          | `String`                | The restoration ID to save and restore the scroll offset.                     |
| clipBehavior           | `StacClip`              | The clip behavior of the page view. Defaults to `Clip.hardEdge`.              |
| padEnds                | `bool`                  | Whether to pad the ends of the page view. Defaults to `true`.                 |
| initialPage            | `int`                   | The initial page to show. Defaults to `0`.                                    |
| keepPage               | `bool`                  | Whether to save the current page. Defaults to `true`.                         |
| viewportFraction       | `double`                | The fraction of the viewport that each page should occupy. Defaults to `1.0`. |
| children               | `List<StacWidget>`      | The widgets below this widget in the tree. Defaults to an empty list.         |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacPageView(
      children: [
        StacContainer(
          color: StacColors.grey,
          child: StacCenter(
            child: StacText(
              data: 'Page 1',
              style: StacTextStyle(fontSize: 23, fontWeight: StacFontWeight.w400),
            ),
          ),
        ),
        StacContainer(
          color: StacColors.orange,
          child: StacCenter(
            child: StacText(
              data: 'Page 2',
              style: StacTextStyle(fontSize: 23, fontWeight: StacFontWeight.w400),
            ),
          ),
        ),
        StacContainer(
          color: StacColors.grey,
          child: StacCenter(
            child: StacText(
              data: 'Page 3',
              style: StacTextStyle(fontSize: 23, fontWeight: StacFontWeight.w400),
            ),
          ),
        ),
      ],
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "pageView",
      "children": [
        {
          "type": "container",
          "color": "#D9D9D9",
          "child": {
            "type": "center",
            "child": {
              "type": "text",
              "data": "Page 1",
              "style": {
                "fontSize": 23,
                "fontWeight": "w400"
              }
            }
          }
        },
        {
          "type": "container",
          "color": "#FC3F1B",
          "child": {
            "type": "center",
            "child": {
              "type": "text",
              "data": "Page 2",
              "style": {
                "fontSize": 23,
                "fontWeight": "w400"
              }
            }
          }
        },
        {
          "type": "container",
          "color": "#D9D9D9",
          "child": {
            "type": "center",
            "child": {
              "type": "text",
              "data": "Page 3",
              "style": {
                "fontSize": 23,
                "fontWeight": "w400"
              }
            }
          }
        }
      ]
    }
    ```
  </Tab>

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

      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>