Skip to main content

Events

What Are Events?​

Events in Nowa are special functions that are triggered automatically when a specific action occurs in the app. Unlike normal functions, which must be manually called, events execute on their own when the associated user action or system event takes place.

For example:

  • onPressed: Gets triggered when a user taps a button.
  • onEditingCompleted: Fires when a user finishes editing a TextField.

This makes event-driven programming intuitive and efficient, as you don't need to worry about when to call the function—the system takes care of that.

How to Implement an Event Function​

  1. Select the UI element (button, text field, etc.) where you want to add an event.
  2. In the Details Panel, locate the desired event.
  3. Click the + button next to the event.
  4. A new function is created and linked to the event.
  5. Click on the function to edit its logic in Circuit.
  6. Define the logic you want to execute when the event occurs.

Common Event Examples​

1. Button - onPressed​

Triggered when a user clicks on a button.

Example:​

  • You can use onPressed to navigate to another screen or submit a form.

2. TextField - onChanged​

Triggered when a user types or modifies the text inside a TextField.

Example:​

  • Updating a search result in real-time as the user types.

Here are some additional commonly used events in Flutter:

  • onTap (GestureDetector, ListTile, InkWell) – Fires when the user taps an element.
  • onLongPress – Triggers when the user presses and holds an element.
  • onSubmitted (TextField) – Fires when the user submits text (pressing enter on a keyboard).
  • onHover (MouseRegion) – Fires when the mouse hovers over an element.
  • onFocusChanged (FocusNode) – Triggers when an input field gains or loses focus.
  • onScroll (ScrollController) – Fires when the user scrolls.

How to Remove an Event Implementation​

If you want to detach an event from a UI element:

  1. Click on the event name inside the Details Panel.
  2. Select Detach to remove the associated function.
  3. Alternatively, right-click on the event name in the Details Panel and choose Detach.

This will unlink the function from the event without deleting the function itself, allowing you to reuse it elsewhere if needed.

Summary​

  • Events automatically trigger functions when specific actions occur.
  • They remove the need to manually call functions, making logic execution seamless.
  • You can implement events by clicking + next to them in the Details Panel.
  • Popular events include onPressed, onChanged, onTap, and more.
  • To remove an event, use the Detach option in the Details Panel.

By understanding and using events effectively, you can make your app more interactive and responsive with minimal effort!