PageView
The PageView widget is a scrolling area that turns through several pages, one page at a time.
Use it for onboarding, image slides, screens you swipe left and right, and more.
Definition and role
The PageView widget lays out repeated child items as pages, and lets you move one page at a time by swiping or from a script. Set the scroll direction (horizontal or vertical), page snapping, scroll physics, end padding, and more.
- Category: Layouts
- Size when dropped: inside a parent layout (Row, Column, Stack, and so on) it starts at
300 x 200. Placed at the top level with no parent, it appears larger to fill the canvas.
Features
| Feature | Description |
|---|---|
| Page-by-page scrolling | Shows one page at a time, and a swipe turns to the next page. |
| Scroll direction | Set pages to turn horizontally or vertically. |
| Page snapping | Snaps to the nearest page once scrolling stops. |
| Repeated items | Renders the child repeatedly, and controls how many pages appear. |
| Script control | Control the visible page with goToPage, nextPage, previousPage, and more, and receive the onPageChanged event whenever the page changes. |
How to use
- Open the Layouts category in the left widget palette.
- Drag and drop the PageView item onto the canvas.
- Place the child widgets you want to show as pages inside it.
- In the Properties panel on the right, set
scrollDirection,pageSnapping, and other values as needed. - If needed, connect the action to run on a page change to
onPageChanged.
Properties
| Property | Description | Default | Value / Type |
|---|---|---|---|
scrollDirection | Direction pages turn in | Horizontal (horizontal) | horizontal, vertical |
itemCount | Number of pages (items) to show | 0 | Number (integer) |
reverse | Flip the scroll direction | false | true / false |
physics | Scroll physics | Not set | bouncing, clamping, alwaysScrollable, rangeMaintaining, neverScrollable, page |
pageSnapping | Snap to the nearest page after scrolling | true | true / false |
dragStartBehavior | What counts as the start of a drag | start | down, start |
allowImplicitScrolling | Preload adjacent pages (allows accessibility scrolling) | false | true / false |
restorationId | Identifier for restoring the scroll position | Not set | String |
clipBehavior | How content outside the area is clipped | hardEdge | none, hardEdge, antiAlias, antiAliasWithSaveLayer |
padEnds | Add padding at the outer ends of the first and last pages | true | true / false |
Notes and tips
Setting physics to neverScrollable stops swiping from turning pages. In that case, move between pages only from a script — goToPage, nextPage, or previousPage.
Connect the action to run on a page change to onPageChanged. To check the current page number from a script, call getCurrentPage().
Learn more
For the full Widget Control (Property, Method, Event) you can use to drive this widget from a script, visit PageView Widget Control.