flutter-animation
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
AnimatedContainerto complex staggered multi-tween setups - Enforces strict memory management with mandatory
AnimationControllerdisposal and performance best practices usingAnimatedBuilder - Covers physics simulations for realistic spring and drag-based motion, plus shared-element hero animations across route transitions
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:
- 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.
- YES: Use Implicit Animations (e.g.,
- Does the animation model real-world movement (springs, gravity, velocity)?
- YES: Use Physics-based animation (
SpringSimulation,animateWith). - NO: Proceed to 3.
- YES: Use Physics-based animation (
- Does the animation involve a widget flying between two different screens/routes?
- YES: Use Hero Animations (
Herowidget). - NO: Proceed to 4.
- YES: Use Hero Animations (
- Does the animation involve multiple sequential or overlapping movements?
- YES: Use Staggered Animations (Single
AnimationControllerwith multipleTweens andIntervalcurves).
- YES: Use Staggered Animations (Single
More from flutter/skills
flutter-building-layouts
Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.
10.6Kflutter-architecting-apps
Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.
10.4Kflutter-animating-apps
Implements animated effects, transitions, and motion in a Flutter app. Use when adding visual feedback, shared element transitions, or physics-based animations.
9.6Kflutter-managing-state
Manages application and ephemeral state in a Flutter app. Use when sharing data between widgets or handling complex UI state transitions.
9.6Kflutter-theming-apps
Customizes the visual appearance of a Flutter app using the theming system. Use when defining global styles, colors, or typography for an application.
9.5Kflutter-implementing-navigation-and-routing
Handles routing, navigation, and deep linking in a Flutter application. Use when moving between screens or setting up URL-based navigation.
9.3K