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

​
Properties

PropertyTypeDescription
scrollDirectionAxisThe axis along which the page view scrolls. Defaults to Axis.horizontal.
reverseboolWhether the page view scrolls in the reverse direction. Defaults to false.
physicsStacScrollPhysics?The physics for the scroll view.
pageSnappingboolWhether the page view should snap to page boundaries. Defaults to true.
onPageChangedMap<String, dynamic>?The callback that is called when the page changes.
dragStartBehaviorDragStartBehaviorThe drag start behavior. Defaults to DragStartBehavior.start.
allowImplicitScrollingboolWhether to allow implicit scrolling. Defaults to false.
restorationIdString?The restoration ID to save and restore the scroll offset.
clipBehaviorClipThe clip behavior of the page view. Defaults to Clip.hardEdge.
padEndsboolWhether to pad the ends of the page view. Defaults to true.
initialPageintThe initial page to show. Defaults to 0.
keepPageboolWhether to save the current page. Defaults to true.
viewportFractiondoubleThe fraction of the viewport that each page should occupy. Defaults to 1.0.
childrenList<Map<String, dynamic>>The widgets below this widget in the tree. Defaults to an empty list.

​
Example JSON

{
  "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"
          }
        }
      }
    }
  ]
}