Skip to main content

Local Variables

Variables are fundamental in app development as they allow you to store and manipulate data dynamically. In Nowa, local variables are used to hold values that may change during the lifetime of a screen or component. These variables can:

  • Be linked to UI properties, ensuring that when the variable's value changes, the UI updates accordingly. For example, a String variable connected to a Text widget will update the displayed text whenever the variable value changes.

  • Be used exclusively in logic, allowing you to control app behavior based on conditions and stored data.

Local variables are variables created for a specific screen or component and can be accessed and changed only inside that screen or component since it's not accessible from outside. To create a variable that is accessible from different screens and components, check out global variables

Examples of Variables​

Here are some practical examples of how variables are commonly used in applications:

  • Boolean Variable (isLoaded): Used to track if data has been successfully loaded. This helps in showing loading indicators and handling asynchronous operations.
  • User ID Variable (userID): Stores the unique identifier of a logged-in user, enabling seamless authentication and data retrieval.
  • List Variable (cartItems): Maintains a list of products added to a shopping cart in an e-commerce app, allowing dynamic updates and item tracking.

Basic Types of Variables​

Variables in Nowa can be of different types, each serving a distinct purpose:

  • String: Represents text values (e.g., "Hello, World!").
  • Int: Represents whole numbers (e.g., 3, 4, -10).
  • Double: Represents decimal numbers (e.g., 4.5, -2.3).
  • Bool: Represents Boolean values (true/false), often used for logical conditions.
  • List: Represents a collection of elements, such as a list of strings, integers, or custom objects.
  • Other built-in types: You can find other types like Color that hold a color value, or DateTime that hold a specific time.
  • Custom Types: You can create your own data types using objects, allowing better structuring of complex data. More details can be found in the Objects section.

Creating a Variable​

You can create a variable for any screen or component:

  1. Select the screen/component.
  2. Open the Variables Panel.
  3. Click + to add a new variable.
  4. Choose the variable type and set a default value (this is the initial value when the screen/component loads).

Example: Creating a "name" Variable​

Let's create a variable named name of type String:

  • Select the screen or component.
  • Click + in the Variables Panel.
  • Choose String as the type and set an initial value (e.g., "User").
note

Besides creating variables on the board, you can also create variables for a screen/component inside the File Preview:

  • The File Preview focuses on one screen/component at a time.
  • Access it by opening the screen or component dart file from the Files Panel, or using the "Open in File Preview" option from the board after selecting the screen or component

Connecting a Variable to a Widget Property​

When a variable is connected to a widget property:

  • The property value becomes equal to the variable.
  • If the variable value changes, the property updates automatically (need to call refresh node after changing the value of the variable, more on that below)
  • The variable type must match the expected property type.

Example: Displaying a Variable in a Text Widget​

We connect the name variable to the Text property of a Text widget:

  • Select the Text widget.
  • Set its Text property to the name variable.
  • Now, whenever the name variable changes, the displayed text updates.
Using Custom Expressions

You can inject variables into properties using Custom Expressions. Example:

  • Instead of just displaying name, set the Text property to "Hello " + name.
  • More details on expressions can be found in the Expressions section.

Updating the Value of a Variable​

To update a variable, use a Logic Graph inside a function or an event:

  1. Select a function or event (e.g., On Pressed event of a button).
  2. Add the variable, then choose Set node.
  3. type the new value for the variable
  4. Add a Refresh UI node to update the UI if the variable is connected to a widget.

Example: Changing the name Variable on Button Press​

  • When the button is pressed, the name variable is updated to the new value.
  • Since name is connected to a Text widget, the displayed text updates automatically.

Setting a Variable Using Another Variable or Custom Expression​

Instead of setting a variable manually, you can:

  • Set its value equal to another variable.
  • Use the custom expression to type a Dart expression for advanced logic.

Click on the value property when using "Set" to configure this.

Creating a Variable from a Widget Property​

Instead of creating a variable first and then connecting it to a property, you can:

  1. Click on a widget property.
  2. Choose "Create Variable".
  3. The system automatically assigns the correct type and connects the variable.
  4. Modify the variable name later in the Variables Panel if needed.

This makes it easier to manage variables directly from UI properties, reducing manual work.

Using local variables effectively allows for dynamic UIs and flexible logic. Start experimenting with variables to create more interactive apps in Nowa!