flutter-animating-apps

Installation

Summary

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

SKILL.md

Implementing Flutter Animations

Core Concepts
Animation Strategies
Workflows
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.