Agent skill · design visual · aiskillstore
flutter-animations
Comprehensive guide for implementing animations in Flutter. Use when adding motion and visual effects to Flutter apps: implicit animations (AnimatedContainer, AnimatedOpacity, TweenAnimationBuilder), explicit animations (AnimationController, Tween, AnimatedWidget/AnimatedBuilder), hero animations (shared element transitions), staggered animations (sequential/overlapping), and physics-based animations. Includes workflow for choosing the right animation type, implementation patterns, and best practices for performance and user experience.
Why this skill is useful
Provides specific implementation patterns and best practices for various animation types in Flutter that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Flutter Animations Overview Create smooth, performant animations in Flutter using the right approach for each use case. This skill covers complete animation workflow: from choosing between implicit/explicit approaches to implementing complex effects like hero transitions and staggered animations. Animation Type Decision Tree Choose the right animation type based on your requirements: Implicit Animations - Use when: Animating a single property (color, size, position) Animation is triggered by state change No need for fine-grained control Explicit Animations - Use when: Need full control over animation lifecycle Animating multiple properties simultaneously Need to react to animation state changes Creating custom animations or transitions Hero Animations - Use when: Sharing an element between two screens Creating shared element transitions User expects element to "fly" between routes Staggered Animations - Use when: Multiple animations should run sequentially or overlap Creating ripple effects or sequential reveals Animating list items in sequence Physics-Based Animations - Use when: Animations should feel natural/physical Spring-like behavior, scrolling gestures Draggable interactions Implicit Animations Implicit animations automatically handle the animation when properties change. No controller needed. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/flutter-animations