Page View

The Page View widget displays a scrollable list of pages. It is commonly used for onboarding screens, carousels, or any UI that requires full-page swiping.

Core Concepts

1. Page-by-Page Navigation

   • Content is split into discrete pages, not continuous scroll.

   • User navigates via swipe or programmatic control (using a controller).

2. PageController & Index

   • A PageController manages:

     • Current page index

     • Animating to the next/previous page

   • You can sync this index with indicators, tabs, or other UI.

3. One Layout per Page

   • Each child is a full layout (could be a whole screen).

   • Perfect when each state/step deserves its own dedicated screen, but you still want smooth swipe navigation.

4. Horizontal or Vertical

   • Commonly horizontal (like stories or onboarding),

   • Can be vertical if your UX calls for it.

Properties

1. Page View Settings

Property	Description
Data Source	A list of data that can be used to dynamically generate pages.
Controller	A PageController variable to control the currently displayed page.
Initial Page	The index of the page to show when the widget is first displayed.
Viewport Fraction	The fraction of the viewport that each page should occupy.
Scroll Direction	The direction of scrolling (horizontal or vertical).

2. Behaviour

Property	Description
Preload Page	If true, pages adjacent to the current page are preloaded.
Keep Page	If true, the state of each page is preserved as it scrolls off-screen.
Allow Scroll	If true, the user can scroll between pages.
Reverse	If true, the order of the pages is reversed.
Pad Ends	If true, padding is added to the ends of the list of pages.
Page Snapping	If true, the scroll view will snap to the nearest page.

3. Actions

Property	Description
onPageChanged	An action triggered when the currently displayed page changes. Receives an object with currentItem (the current page data) and index (the page index).

Children of Page View

Slot	Description
children	The child widgets that represent each page in the page view. Each child has access to currentItem (the data for that page) and index (the page index). You can access these directly by name or with the PageView name prefix: pageViewName.currentItem.

---

Default Properties

The Page View widget supports the following sections of Default Properties:

Layout

• width

• height

• padding

• margin

Alignment

• align

Visibility

• visible

Use Cases

The PageView widget lets users swipe between full-screen pages horizontally (or vertically). Each page is usually a complete screen or section.

Use PageView when you want:

• Onboarding / Intro Screens

  • Multiple slides explaining features of the app

  • Combined with dots/indicators to show progress (like your Digia onboarding)

• Tabbed, swipeable content

  • Swipe between “Overview / Details / Reviews”

  • News sections, categories, or stories that users can swipe through

• Step-by-step flows

  • Multi-step forms (Step 1 → Step 2 → Step 3)

  • Tutorials or walkthroughs with one step per page

• Carousel-style full pages

  • Full-screen banners or hero sections you can swipe

  • Feature highlights or campaigns laid out as separate pages