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

{% embed url="<https://youtu.be/uHpNUKQjOI8?si=fV3y_tfpRb06ga3I>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=uHpNUKQjOI8>

### 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](https://docs.digia.tech/ui-building-blocks/widgets/default-properties "mention"):

**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