flutter-animations_skill

Overview

This skill is a comprehensive guide for implementing animations in Flutter, covering implicit and explicit approaches, hero and staggered transitions, and physics-based motion. It helps you choose the right animation type, implement common patterns, and apply performance and UX best practices. Use it to add motion that feels natural, accessible, and maintainable.

How this skill works

The guide inspects common animation needs (single-property changes, multi-property control, shared element transitions, sequential effects, and physics-driven behavior) and maps them to Flutter APIs and patterns. It explains when to use implicit widgets versus AnimationController-driven explicit animations, demonstrates AnimatedWidget/AnimatedBuilder patterns, shows hero and staggered setups, and covers physics simulations and timing strategies. Each topic includes implementation patterns and performance tips.

When to use it

• Simple property changes like color, size, or opacity where minimal code is desired (implicit animations).
• Complex sequences, synchronized multi-property animations, or when you need lifecycle control (explicit AnimationController).
• Shared element transitions between routes (Hero animations) for visual continuity.
• Sequential or overlapping effects for lists, menus, or reveal animations (staggered animations).
• Natural, springy, or gesture-driven motion that requires physics simulations.

Best practices

• Prefer implicit widgets for simple, single-property changes to reduce boilerplate.
• Dispose AnimationController in dispose() to avoid leaks and use AnimatedBuilder/AnimatedWidget to minimize setState() usage.
• Use Curves and Interval to create natural timing; tune durations for responsiveness and clarity.
• Avoid animating heavy widgets; keep build methods lightweight and test on target devices.
• Respect accessibility: detect and honor system reduce-motion preferences and avoid over-animating.

Example use cases

• Fade and size changes with AnimatedOpacity/AnimatedContainer for responsive UI feedback.
• A custom loader built with AnimationController, Tween, and AnimatedBuilder for controlled loops and states.
• Showcase-detail transition using Hero to animate an image between list and detail routes.
• Staggered menu where items slide and fade in sequence using a shared controller and Interval curves.
• Drag-to-dismiss or fling interactions using SpringSimulation or controller.fling for natural motion.