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

# CarouselView

> Documentation for CarouselView

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

export const carouselViewPreviewJson = {
  "type": "carouselView",
  "carouselType": "weighted",
  "padding": 12,
  "backgroundColor": "#FFFFFF",
  "elevation": 5,
  "overlayColor": "#FF0000",
  "itemSnapping": true,
  "shrinkExtent": 0,
  "scrollDirection": "horizontal",
  "reverse": false,
  "onTap": {
    "type": "callback",
    "name": "onItemTap"
  },
  "enableSplash": true,
  "itemExtent": 300,
  "flexWeights": [1, 7, 1],
  "children": [{
    "type": "image",
    "height": 400,
    "fit": "cover",
    "src": "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_1.png"
  }, {
    "type": "image",
    "height": 400,
    "fit": "cover",
    "src": "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_2.png"
  }, {
    "type": "image",
    "height": 400,
    "fit": "cover",
    "src": "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_3.png"
  }]
};
export const carouselViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

## Properties

| Property        | Type                   | Description                                                                 |
| --------------- | ---------------------- | --------------------------------------------------------------------------- |
| carouselType    | `StacCarouselViewType` | The type of the carousel. Defaults to `StacCarouselViewType.regular`.       |
| padding         | `StacEdgeInsets`       | The amount of space by which to inset the carousel.                         |
| backgroundColor | `StacColor`            | The background color of the carousel.                                       |
| elevation       | `double`               | The z-coordinate at which to place this carousel.                           |
| overlayColor    | `StacColor`            | The color of the carousel's overlay.                                        |
| itemSnapping    | `bool`                 | Whether the items should snap into place. Defaults to `false`.              |
| shrinkExtent    | `double`               | The amount by which to shrink the carousel. Defaults to `0.0`.              |
| scrollDirection | `StacAxis`             | The axis along which the carousel scrolls. Defaults to `Axis.horizontal`.   |
| reverse         | `bool`                 | Whether the carousel scrolls in the reverse direction. Defaults to `false`. |
| onTap           | `StacAction`           | The callback that is called when an item is tapped.                         |
| enableSplash    | `bool`                 | Whether to enable splash effect on tap. Defaults to `true`.                 |
| itemExtent      | `double`               | The extent of each item in the carousel.                                    |
| flexWeights     | `List<int>`            | The flex weights for the items in the carousel.                             |
| children        | `List<StacWidget>`     | The widgets below this widget in the tree.                                  |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacCarouselView(
      carouselType: StacCarouselViewType.weighted,
      padding: StacEdgeInsets.all(12),
      backgroundColor: StacColors.white,
      elevation: 5.0,
      overlayColor: StacColors.red,
      itemSnapping: true,
      shrinkExtent: 0.0,
      scrollDirection: StacAxis.horizontal,
      reverse: false,
      onTap: {'type': 'callback', 'name': 'onItemTap'},
      enableSplash: true,
      itemExtent: 300,
      flexWeights: [1, 7, 1],
      children: [
        StacImage(
          height: 400,
          fit: StacBoxFit.cover,
          src: 'https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_1.png',
        ),
        StacImage(
          height: 400,
          fit: StacBoxFit.cover,
          src: 'https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_2.png',
        ),
        StacImage(
          height: 400,
          fit: StacBoxFit.cover,
          src: 'https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_3.png',
        ),
      ],
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "carouselView",
      "carouselType": "weighted",
      "padding": 12,
      "backgroundColor": "#FFFFFF",
      "elevation": 5,
      "overlayColor": "#FF0000",
      "itemSnapping": true,
      "shrinkExtent": 0,
      "scrollDirection": "horizontal",
      "reverse": false,
      "onTap": {
        "type": "callback",
        "name": "onItemTap"
      },
      "enableSplash": true,
      "itemExtent": 300,
      "flexWeights": [
        1,
        7,
        1
      ],
      "children": [
        {
          "type": "image",
          "height": 400,
          "fit": "cover",
          "src": "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_1.png"
        },
        {
          "type": "image",
          "height": 400,
          "fit": "cover",
          "src": "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_2.png"
        },
        {
          "type": "image",
          "height": 400,
          "fit": "cover",
          "src": "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_3.png"
        }
      ]
    }
    ```
  </Tab>

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

      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>