# 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**.

{% embed url="<https://www.youtube.com/watch?v=ZM1E2vqGhqQ>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=ZM1E2vqGhqQ>

<figure><img src="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-033470dc9442ad66e6fdef69f1dd323de7251716%2Fanimated_switcher.gif?alt=media" alt="A hero image showing a switch widget in on and off states with customizable styling."><figcaption><p>The Switch widget provides intuitive binary toggle controls for settings and preferences.</p></figcaption></figure>

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

{% embed url="<https://youtu.be/ZM1E2vqGhqQ?si=GzPPxVINNHCuqU-F>" %}

### 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](https://docs.digia.tech/ui-building-blocks/widgets/default-properties "mention").

### 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