Animation Builder

The Animation Builder widget is a powerful tool for creating custom animations. It listens to a controller (PageController or ScrollController) and rebuilds its child widget whenever the controller's value changes. This allows you to create animations that are driven by scrolling or paging interactions.

Core Concepts

  1. Controller-Driven Rebuilds

    • The Controller property accepts a PageController or ScrollController.

    • Whenever the controller's value changes (scroll position or page index), the Animation Builder rebuilds its child.

  2. Value-Based Animations

    • Inside the child, you can access the controller's current values (scroll offset, page index) to drive animations.

    • This allows creating animations that respond to scroll or page changes.

  3. Separation of Logic & UI

    • The controller handles scrolling or paging behavior.

    • The Animation Builder handles how those changes are visualized in the UI.

Properties

Property
Description

Controller

A PageController or ScrollController variable that provides scroll or page values. When this value changes, the child widget of the Animation Builder will be rebuilt.

Child of Animation Builder

Slot
Description

Child

The widget to be rebuilt whenever the controller's value changes. The child can access the controller's current values (scroll offset or page index) to create animations.

Default Properties

The Animation Builder widget supports all Default Properties.

Use Cases

Use Animation Builder when you want:

  • Scroll-based animations

    • Animate elements as the user scrolls (fade in/out, parallax, scale changes).

  • Page-based animations

    • Animate transitions between pages in a PageView.

  • Interactive animations

    • Tie animations to scroll position or page index by using PageController or ScrollController values.

  • Chained / complex animations

    • Create coordinated effects across multiple widgets based on scroll or page changes.

Last updated