Skip to main content

Local Parameters

In Nowa, parameters let you pass information to a Screen or Component from outside. They help you display the right data when opening a Screen or using a Component.

Think of parameters like filling out a form before entering a new place. If you open a News Details Screen, it needs a title, image, and description. You give these details when opening the Screen, and it uses them to show the content.

What Are Parameters?​

  • Parameters are like input fields. They receive information from outside and use it inside a Screen or Component.
  • They do not change after being set. They only receive a value when you go to a Screen or add a Component.
  • They help show the right data. A shopping cart card needs product details like name, price, and image. You pass this data when using the card.

When Do You Need Parameters?​

You need parameters when:
âś” A Screen needs outside data. Example: A "News Details" Screen needs a title, image, and description.
✔ A Component needs information from the Screen it’s in. Example: A "Product Card" Component needs a product name, price, and image.

How to Create a Parameter​

  1. Select the Screen or Component.
  2. Find the "Variables" panel (on the right side).
  3. Click the "+" button next to Parameters.
  4. Set the name, type, and default value.

đź’ˇ Default Value: This is used when no value is passed. Example: If a news article has no image, you can set a default image to be used then.

Quick Way to Create a Parameter​

  • Click on a widget property (e.g., Text, Image).
  • Select "Create a Param."
  • A parameter is made automatically and linked to the widget.

How to Use Parameters​

Connecting a Parameter to a Widget​

  1. Select the widget (Text, Image, etc.).

  2. Click on the property (e.g., Text for a Text widget) that you want to connect it to a parameter.

  3. Go to "Locals" to see available parameters and variables.

  4. Choose the parameter to link it to the widget.

⚠️ Important: The parameter must match the widget’s expected type.
For example, a Text widget expects a String, and an Image widget needs an image URL.

Using Parameters in Screens​

How to Pass Data When Navigating to a Screen​

  1. Use a Navigator Node to go to a new Screen.

  2. Click on the brush icon next to the Screen name.

  3. Enter values for the parameters. You can:

    • Type a value manually.
    • Use a variable or parameter from the current Screen. To do so, click on the parameter name itself, then select the required variable or parameter from the menu
    • Write a Custom Dart expression for advanced use.

Using Parameters in Components​

Why Use Parameters in Components?​

  • To make Components reusable. Example: A "Product Card" can be used many times, each time showing different products.
  • To allow Screens to send data to Components. Example: A Shopping Cart Component needs the product details to show inside a Screen.

How to Pass Data to a Component​

  1. Drag the Component onto a Screen.
  2. Select the Component.
  3. In the right panel, enter the parameter values. You can pass typed values, or click on the parameter name to connect it to a screen variable, parameter or to use an expression.

If you don’t enter values, you might see errors in the widgets that are connected to the parameter that their values are null. You can fix this by:
âś” Giving the parameter a default value. This will be used anytime no data is passed to the component âś” Passing a value when using the Component.: Select the component, and in the details panel you can pass data to the component. This however will be for that instance only of the component.

Example: Creating a "Product Card" Component​

We have:

  • A custom type called Product with:
    • name (String)
    • img (String)
    • price (double)
  • A Product Card Component that shows these details.

Steps:​

  1. Create a "Product" type with name, img, and price. More on that in the Objects page
  2. Create a "Product Card" Component.
  3. Add a parameter named product (type: Product).
  4. Link the parameter to widgets:
    • Text widget → product.name
    • Image widget → product.img
    • Price text → product.price.toString() (you need to select toString to convery the price to a String to be connected with the Text widget)
  5. Use the Component inside a Screen.
  6. Pass a product object when using the Component, or connect it to an existing variable

⚠️ If no product is passed, the Component may show errors.
Fix this by giving a default product or always passing a value.

Common Questions​

1. Do I always need parameters?​

No. Only when a Screen or Component needs outside data.

2. Can I change a parameter’s value inside the Screen or Component?​

No. Parameters only receive data. If you need to update data, use variables instead.

3. What happens if I don’t pass a value for the parameter and not set a default value?​

The Screen or Component will show null errors for trying to use a parameter that has no value. You can fix this by:
âś” Passing a value for the parameters from the board each time you use the screen or component for testing the UI only (since when running the app, what you passed from the board won't be used)
âś” Giving the parameter a default value.

4. Can a Screen or Component have multiple parameters?​

Yes. You can add as many as needed.

5. How do I delete or rename a parameter?​

Go to the Variables panel, find the parameter, and edit or delete it.

Summary​

âś” Parameters let you send data into Screens and Components.
âś” They help show the right data.
âś” You create them in the Variables panel or from a widget property.
âś” You use them by linking them to widgets.
âś” Always pass values or set default values to avoid errors.