Skip to main content
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.

​
Properties

PropertyTypeDescription
carouselTypeStacCarouselViewTypeThe type of the carousel. Defaults to StacCarouselViewType.regular.
paddingStacEdgeInsets?The amount of space by which to inset the carousel.
backgroundColorString?The background color of the carousel.
elevationdouble?The z-coordinate at which to place this carousel.
overlayColorString?The color of the carousel’s overlay.
itemSnappingboolWhether the items should snap into place. Defaults to false.
shrinkExtentdoubleThe amount by which to shrink the carousel. Defaults to 0.0.
scrollDirectionAxisThe axis along which the carousel scrolls. Defaults to Axis.horizontal.
reverseboolWhether the carousel scrolls in the reverse direction. Defaults to false.
onTapMap<String, dynamic>?The callback that is called when an item is tapped.
enableSplashboolWhether to enable splash effect on tap. Defaults to true.
itemExtentdouble?The extent of each item in the carousel.
flexWeightsList<int>?The flex weights for the items in the carousel.
childrenList<Map<String, dynamic>>The widgets below this widget in the tree.

​
Example JSON

{
  "type": "carouselView",
  "carouselType": "weighted",
  "padding": 12,
  "backgroundColor": "#FFFFFF",
  "elevation": 5.0,
  "overlayColor": "#FF0000",
  "itemSnapping": true,
  "shrinkExtent": 0.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"
    }
  ]
}