Timer

The Timer widget is a versatile tool for creating time-based interactions. It can be used as a countdown timer or a stopwatch, and it provides actions that can be triggered at specific intervals or when the timer ends. This is useful for creating quizzes, games, or any UI element that needs to be updated based on time.

Properties

Property	Description
controller	An expression that can be used to control the timer (e.g., start, stop, reset).
duration	The total duration of the timer in seconds.
initialValue	The initial value of the timer. For a countdown timer, this is the number of seconds to count down from. For a stopwatch, this is the starting time.
updateInterval	The interval in seconds at which the onTick action is triggered.
timerType	The type of timer. Can be countDown or countUp.
onTick	An action to be executed at each updateInterval.
onTimerEnd	An action to be executed when the timer finishes.

---

Default Properties

The Timer widget supports all three sections of default-properties

Layout

• width

• height

• padding

• margin

• align

Appearance

• bgColor

• borderRadius

• border

  • borderWidth

  • borderColor

  • borderType (e.g., solid, dashed)

  • strokeAlign

Interactions

• onClick — Used to add actions to the Timer widget.

---

Child of Timer

Slot	Description
child	The widget to be displayed. The child has access to the tickValue variable, which contains the current value of the timer.

---

Best Practices

• Use the controller to start, stop, and reset the timer from other parts of your app.

• Use the onTick action to update the UI with the current timer value.

• Use the onTimerEnd action to perform an action when the timer finishes, such as showing a message or navigating to another screen.