Skip to main content

Create a screen function

What is a Function and Why is it Needed?​

A function is a block of instructions that performs a specific task. Functions help structure an app by breaking down logic into smaller, reusable parts. They make the app more organized, easier to debug, and more efficient by avoiding repetition.

For example, instead of writing the same logic multiple times, you can define a function and call it whenever needed. Functions can also take inputs (parameters) and return outputs (results), allowing for dynamic and flexible operations.

What You Can Do with Functions in Nowa​

Nowa allows you to create and manage functions in different ways, depending on your needs:

  • Create a new local function: You can add a function specific to a screen or component to encapsulate its logic.
  • Override an existing function: Functions like initState (which runs when a screen or component loads) can be overridden to define custom behavior.
  • Build event-driven functions: Functions can be triggered by events such as:
    • onPressed (when a button is pressed)
    • onChanged (when a user types in a text field)
  • Create a function inside a global state: This makes the function reusable across the entire app, rather than limiting it to a single screen or component.

How to Create a Screen/Component Function​

To create a function inside a specific screen or component, follow these steps:

  1. Select the screen or component where you want to add the function.
  2. Click on the + next to "Functions" inside the variables panel on the right.
  3. Rename the function by clicking on the newly created function.
  4. Set a return type (optional, based on whether the function will return a value. Keep it void if the function is designed to do something without returning something).
  5. Click on Edit to open the function in Circuit, where you can build the logic visually.
  6. Add parameters by selecting the function node and defining parameters with their types.
  7. If the function has a return type, use the "Return" node to define the output.

Here's an example of creating a function that converts Celsius to Fahrenheit. The function will get the Celsius degree by a parameter, and use an equation to calculate the Fahrenheit value then return it. The function will be called then inside On Pressed event.

How to Use a Function​

Accessing a Local Function​

  • If you created a function inside a screen or component, you will find it under Locals when working within the same screen or component.
  • Since local functions are context-specific, they can only be accessed inside the same screen or component where they were created.

Passing a Function as a Callback​

  • If you need to use a function from a different screen or component, you can create a parameter out of an event like On Pressed then you can pass a different functions though the parameter
  • This technique is called a Callback, allowing you to pass different functions dynamically through parameters.
  • If the function is intended to be used globally, consider creating it as a global function inside a global state so it can be called from anywhere in the app.

More details on Callbacks and Global Functions will be covered in later sections of the documentation.

Executing a Function with Parameters​

  • After selecting a function node, if the function requires parameters:
    • You can manually enter values
    • You can link function parameters to existing variables or expressions for dynamic execution.

Storing the Result of a Function​

  • If the function returns a value, you will see an option labeled "Store Result".
  • The result can be stored in:
    • A new variable.
    • An existing variable to update its value.

Summary​

  • Functions allow you to structure app logic into reusable blocks.
  • In Nowa, you can create local functions for screens or components, override existing functions, or define event-driven functions.
  • To use functions effectively:
    • Access local functions within the same screen/component.
    • Use callbacks to pass functions as parameters between components.
    • Store function results in variables for later use.

With functions, you can build advanced logic and make your app dynamic while keeping the code organized and efficient.