flutter-animating-apps

SKILL.md

Visual feedback, transitions, and physics-based motion for Flutter apps using the Animation framework.

Four animation strategies: implicit animations for simple property changes, explicit animations with playback control, Hero transitions for shared elements between routes, and physics-based animations for gesture-driven natural motion

Core typed Animation system with AnimationController, Tween, and Curve classes; always dispose controllers to prevent memory leaks

Staggered animations using Interval curves to coordinate multiple properties on a single timeline

Detailed workflows for each animation pattern, from setup through validation, with runnable examples including staggered animations and custom page route transitions

Implementing Flutter Animations

Contents

Core Concepts

Animation Strategies

Workflows

Implementing Implicit Animations

Implementing Explicit Animations

Implementing Hero Transitions

Implementing Physics-Based Animations

Examples

Core Concepts

Manage Flutter animations using the core typed Animation system. Do not manually calculate frames; rely on the framework's ticker and interpolation classes.

Animation<T>: Treat this as an abstract representation of a value that changes over time. It holds state (completed, dismissed) and notifies listeners, but knows nothing about the UI.

AnimationController: Instantiate this to drive the animation. It generates values (typically 0.0 to 1.0) tied to the screen refresh rate. Always provide a vsync (usually via SingleTickerProviderStateMixin) to prevent offscreen resource consumption. Always dispose() controllers to prevent memory leaks.

Tween<T>: Define a stateless mapping from an input range (usually 0.0-1.0) to an output type (e.g., Color, Offset, double). Chain tweens with curves using .animate().

Curve: Apply non-linear timing (e.g., Curves.easeIn, Curves.bounceOut) to an animation using a CurvedAnimation or CurveTween.