flutter-animation

Installation
Summary

Select and implement the optimal Flutter animation strategy for your UI requirement.

  • Includes a decision tree to choose between implicit animations, explicit tweens, physics-based motion, hero transitions, staggered sequences, and page route transitions
  • Provides complete code examples for each animation type, from simple AnimatedContainer to complex staggered multi-tween setups
  • Enforces strict memory management with mandatory AnimationController disposal and performance best practices using AnimatedBuilder
  • Covers physics simulations for realistic spring and drag-based motion, plus shared-element hero animations across route transitions
SKILL.md

Flutter Animations Implementation

Goal

Implements and manages Flutter animations, selecting the appropriate animation strategy (implicit, explicit, tween, physics, hero, or staggered) based on UI requirements. Assumes a working Flutter environment, stateful/stateless widget competence, and a standard widget tree structure.

Instructions

1. Determine Animation Strategy (Decision Logic)

Evaluate the UI requirement using the following decision tree to select the correct animation approach:

  1. Is the animation a simple property change (color, size, alignment) on a single widget?
    • YES: Use Implicit Animations (e.g., AnimatedContainer).
    • NO: Proceed to 2.
  2. Does the animation model real-world movement (springs, gravity, velocity)?
    • YES: Use Physics-based animation (SpringSimulation, animateWith).
    • NO: Proceed to 3.
  3. Does the animation involve a widget flying between two different screens/routes?
    • YES: Use Hero Animations (Hero widget).
    • NO: Proceed to 4.
  4. Does the animation involve multiple sequential or overlapping movements?
    • YES: Use Staggered Animations (Single AnimationController with multiple Tweens and Interval curves).
Related skills
Installs
1.1K
Repository
flutter/skills
GitHub Stars
1.9K
First Seen
Mar 4, 2026