# Pages

## Overview

In Digia, a **Page** represents a distinct screen within your mobile app. It acts as the container for your layout, state, and logic. Every screen user navigates to—whether it's a Login screen or a Product Details screen—is a Page.

## Anatomy of a Page

A Page is not just a blank canvas; it has a specific structure that Digia enforces to ensure consistency.

### 1. The Scaffold Foundation

Every page in Digia starts with a **Scaffold**. The Scaffold is the basic structure of a visual interface. It provides standard app elements such as:

* **App Bar**: The top navigation bar.
* **Body**: The main content area.
* **Floating Action Button**: A primary action button.
* **Background Color**: The base color of the screen.

> \[!TIP] Learn more about configuring the Scaffold in the [**Scaffold Documentation**](https://docs.digia.tech/ui-building-blocks/widgets/layout-structure-widgets/scaffold).

### 2. The Widget Tree

Inside the Scaffold's **Body**, you build your specific layout using a **Widget Tree**. This is where you drag-and-drop Rows, Columns, Texts, and Buttons to create your UI.

## Data & Logic

Pages are dynamic. They accept data, maintain their own state, and react to lifecycle events.

### Page Arguments (Inputs)

Pages often behave like functions that require inputs. **Page Arguments** are immutable parameters passed from the "outside world" (the previous screen/route).

**Examples:**

* **Product Details Page**: Requires `productId` (String).
* **Order Confirmation Page**: Requires `orderId` (Integer) and `totalAmount` (Double).

These arguments are defined in the Page Properties tab and are available to use via Data Binding anywhere on the page.

### Page State (Internal)

While Arguments come from outside, **Page State** is strictly internal. These are mutable variables that your page uses to handle interactivity.

**Examples:**

* `isLoading`: Sets to true while fetching data, false when done.
* `selectedSize`: Stores the user's choice ('S', 'M', 'L').

> \[!NOTE] Read the full [State Management Guide](https://docs.digia.tech/data-and-state/state-management) for details.

## Page Lifecycle

A Page goes through a specific lifecycle: **Created ➝ Painted ➝ Destroyed**. You can hook into specific moments of this lifecycle to run logic.

### onPageLoad (After First Paint)

This action triggers **after the page has been built and painted** on the screen.

* **When it runs**: It acts like a "Post Frame Callback". It basically runs immediately after the user sees the screen.
* **Use Case**: Ideal for triggering analytics (`ScreenView`) or kicking off fresh data fetches.
* **Correction**: It has no direct relation to API calls. An API call is just one *kind* of action you *might* trigger here.

### onBackPress (Dismissal Notification)

This action triggers when the user attempts to close the page (e.g., swiping back or pressing the system Back button).

* **Behavior**: This is a **notification** that the page is closing. It **DOES NOT STOP** the dismissal. The page *will* close regardless of what logic you run here.
* **Warning**: Do not start long-running tasks here (like a complex database save) because the page context is about to be destroyed.

## Entry Point (The "First Page")

Any page can be designated as the **First Page**.

* **In Digia Studio/Preview**: This tells the previewer which page to load first.
* **in Native Apps**: If you embedding Digia pages into an existing Flutter app, you predominantly control the entry point via your native code (`DUIPage(slug)`).

## Working in Studio

### Creating a Page

1. Open the **Pages Panel** from the left sidebar.
2. Click the **+** button.
3. Choose **Create Blank Page** (or pick a template).
4. Enter a unique name (e.g., `ProfileSettings`).

### Managing Pages

* **Duplicate**: Hover over a page in the list ➝ Click `...` ➝ **Duplicate**. Useful for creating variants.
* **Delete**: Hover over a page ➝ Click `...` ➝ **Delete**.