Animated Switcher

The Animated Switcher widget provides a smooth transition between two child widgets. When the showFirstChild property changes, the widget animates the transition from one child to the other, providing a visually appealing user experience. This is useful for showing different states of a UI element, such as a loading spinner transitioning to content, or toggling between two views.

Properties

Property	Description
animationDuration	The duration of the animation in milliseconds. This controls how long the transition between the two children takes.
showFirstChild	A boolean value that determines which child is currently visible. If true, the first child is shown; otherwise, the second child is shown.

Default Properties

The Animated Switcher 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 Animated Switcher widget.

Children of Animated Switcher

Slot	Description
firstChild	This is the first child of the animated switcher. When showFirstChild is true, this widget will be displayed.
secondChild	This is the second child of the animated switcher. When showFirstChild is false, this widget will be displayed.

Best Practices

• Use the AnimatedSwitcher to create smooth transitions between two states of a UI element.

• Keep the animation duration short to avoid a sluggish user experience.

• For more complex animations, consider using the AnimationBuilder widget.