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
Controller-Driven Rebuilds
The
Controllerproperty accepts a PageController or ScrollController.Whenever the controller's value changes (scroll position or page index), the Animation Builder rebuilds its child.
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.
Separation of Logic & UI
The controller handles scrolling or paging behavior.
The Animation Builder handles how those changes are visualized in the UI.
Properties
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
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