# 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**](/ui-building-blocks/widgets/layout-structure-widgets/scaffold.md).

### 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](/data-and-state/state-management.md) 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**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digia.tech/ui-building-blocks/pages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.