Animated Switcher

The Animated Switcher widget provides a smooth animated transition between two child widgets. When the Show First Child (or equivalent toggle) changes, it animates from one child to the other instead of instantly swapping them. This is great for making state changes feel polished and fluid.

The Switch widget provides intuitive binary toggle controls for settings and preferences.

Any time you’re swapping one widget for another, Animated Switcher makes it feel smooth instead of abrupt.

Core Concepts

1. Two Children, One Visible

   • The Animated Switcher conceptually manages two children:

     • First child

     • Second child

   • A boolean-like property (e.g., Show First Child) controls which one is currently visible.

2. Animated Transition

   • When the visible child changes, Animated Switcher:

     • Animates out the old child

     • Animates in the new child

   • The transition can use default or configured animations (fade, scale, etc. depending on your implementation).

3. State-Based UI Swap

   • Rather than manually handling animations, you just:

     • Define two states as two widgets

     • Let Animated Switcher handle the transition when the state flag changes.

Properties

Property	Description
Animation Duration	The duration of the animation in milliseconds. This controls how long the transition between the two children takes.
Show First Child	A boolean value that determines which child is currently visible. If true, the first child is shown; otherwise, the second child is shown.
Switch In Curve	The animation curve used for the incoming child during transition.
Switch Out Curve	The animation curve used for the outgoing child during transition.

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.

Default Properties

The Animated Switcher widget supports all Default Properties.

Use Cases

Use Animated Switcher when you want to visually transition between two states of a UI element, for example:

• Loading → Content

  • Show a loading spinner while data is fetching

  • Smoothly transition to the actual content once data is ready

• On / Off States

  • Toggle between “Follow” / “Following” buttons

  • Switch between active/inactive, enabled/disabled, or compact/expanded views

• Empty State → Data State

  • Show a “No items” placeholder

  • Animate into a list or grid when items become available

• Mode Toggling

  • Switch between:

    • Grid view / List view

    • Basic view / Detailed view

    • Light mode variant / Dark mode variant of an element