← ClaudeAtlas

flutter-animating-appslisted

Implements animated effects, transitions, and motion in a Flutter app. Use when adding visual feedback, shared element transitions, or physics-based animations.
openplaybooks-dev/converge · ★ 3 · AI & Automation · score 76
Install: claude install-skill openplaybooks-dev/converge
# Implementing Flutter Animations ## Contents - [Core Concepts](#core-concepts) - [Animation Strategies](#animation-strategies) - [Workflows](#workflows) - [Examples](#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>`**: 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`**: Drives the animation. Generates values (typically 0.0 to 1.0) tied to the screen refresh rate. Always provide a `vsync` (usually via `SingleTickerProviderStateMixin`). Always `dispose()` controllers to prevent memory leaks. * **`Tween<T>`**: 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`) via `CurvedAnimation` or `CurveTween`. ## Animation Strategies * **Simple property changes (size, color, opacity) without playback control:** Use **Implicit Animations** (`AnimatedContainer`, `AnimatedOpacity`, `TweenAnimationBuilder`). * **Playback control (play, pause, reverse, loop) or coordinating multiple properties:** Use **Explicit Animations** (`AnimationController` with `AnimatedBuilder` or `AnimatedWidget`). * **Elements between two dis