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.

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