State Management
State is the "memory" of your application. It constitutes any data that can change over time—like what the user has typed into a form, whether a toggle is checked, or the current item loaded from an API.
Why do we need State Management?
Without State Management, your app would be static. It wouldn't "remember" anything. When you change a value, the UI needs to know about it so it can redraw itself to reflect that change.
State Management provides a structured way to:
Store dynamic data.
Update that data in response to user actions (clicks, typing).
Reflect those updates on the UI automatically.
State Variables
State Variables are essentially just Variables. They provide a way to reference your application's memory by a specific name (e.g., isVisible, counterValue).
Key Characteristics
Initial Value: Every state variable acts as a container created with an initial value (default).
Usage: Once created, you can use the variable in an Expression bound to a widget property. When the variable changes, the widget updates automatically.
Updating: You can modify the value of these variables using specific Actions:
Set State Action: For Page/Component or Local variables.
Set App State Action: For Global variables.
Creating State Variables
In Digia, you can create state variables at three distinct levels, which determines their scope and lifecycle.
Global Level (App State): Created in the App Settings. Accessible everywhere.
Page or Component Level: Created in the Page/Component configuration. Accessible only within that screen or component.
Local Level (State Container): Inserted as a parent widget in the tree (the State Container widget) to manage state for just that specific child sub-tree.
State Scope
Scope determines where a variable can be read (accessed) and where it can be modified.
Think of it like scopes in a programming language (e.g., JavaScript):
App State ≈ Global Variable (Accessible everywhere).
Page State ≈ File Scope (Accessible only inside the file).
Local State ≈ Function/Block Scope
{ }(Accessible only inside a specific function/block).
1. App State (Global)
Definition: Variables defined at the application root.
Lifecycle: Lives as long as the app is running. (Persists if configured).
Access: Can be Read and Updated from any page or component.
Update Action: Set App State.
2. Page & Component State
Definition: Variables defined on a specific Page or Component.
Lifecycle: Created when the page triggers
OnLoad. Destroyed when the user navigates away (page is popped).Access: Can be Read anywhere on that page. Can be Updated by any action on that page.
Update Action: Set State.
3. Local State (via State Container)
Definition: Variables managed by a State Container widget inserted into the widget tree.
Lifecycle: Alive only as long as that specific widget exists in the tree.
Access: accessible only to the children of that State Container.
Update Action: Set State (Context-aware).
Last updated