skills.rest
gmolike
gmolikeCOMMUNITY
Explore all skills by this author →
GitHub

flutter-animations

Implement, debug, and refactor Flutter animations using implicit, explicit, Hero, staggered, and physics-based patterns.

Updated Mar 4, 2026
Search Tags:#animations#flutter#dart#physics simulation#animationcontroller#hero transition#staggered animation
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill flutter-animations-gmolike
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-animations
Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/flutter-animations
Command: npx skills add https://github.com/gmolike/Claude-Template --skill flutter-animations-gmolike

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve? Flutter animation code often becomes hidden state, leaks undisposed AnimationControllers, or ships with jank and accessibility gaps. This Skill guides the selection and implementation of the right animation model for each situation, ensuring lifecycle-safe, analyzer-clean, and reduced-motion-aware motion code. ## Core Features & Use Cases - Animation Model Selection: Decision guide mapping needs to implicit widgets (AnimatedContainer, AnimatedSwitcher, TweenAnimationBuilder), explicit AnimationController patterns, Hero transitions, staggered intervals, or physics simulations. - Lifecycle-Safe Implementation: Enforces controller ownership, disposal, child caching, and minimal rebuild regions using AnimatedBuilder and AnimatedWidget patterns. - Accessibility & Validation: Checks MediaQuery.disableAnimations for reduced-motion support and validates changes with dart format, flutter analyze, and focused widget tests. - Use Case: When a list reveal feels janky, the Skill inspects the widget tree, replaces per-item controllers with a single controller using Interval-based staggered timing, and verifies the result with the analyzer. ## Quick Start Ask the assistant to add a staggered fade-and-slide reveal animation to the menu items in your Flutter screen and verify it passes flutter analyze.

Frequently Asked Questions about flutter-animations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose between implicit and explicit animations in Flutter?▼

Use implicit animations like AnimatedContainer or TweenAnimationBuilder for simple state-driven property changes. Use explicit animations with AnimationController when you need lifecycle control, repeat or reverse behavior, gesture-driven values, or coordination of multiple properties.

How do I create a staggered animation in Flutter?▼

Use a single AnimationController and give each property its own CurvedAnimation with an Interval defining its start and end within the controller timeline. Overlapping intervals create sequenced or ripple effects without needing multiple controllers.

Why does my Flutter animation leak memory or throw after dispose?▼

The AnimationController was likely not disposed or was created inside a build method. Controllers must be owned by the State object, created in initState with a TickerProvider, and disposed in dispose along with any listeners.

How do Hero animations work between Flutter routes?▼

Place Hero widgets with matching unique tags in both the source and destination routes, and Flutter animates the shared element during navigation. Use flightShuttleBuilder for custom in-flight appearance and createRectTween for custom flight paths.

How do I support reduced motion accessibility in Flutter animations?▼

Check MediaQuery.of(context).disableAnimations and provide a static or instant path for non-essential motion when it is set. The Skill treats reduced-motion support as mandatory for user-facing animations rather than optional.

Related Skills

Explore More Software Engineering Skills→
bellugabelluga

wf-flutter-create-screen-method

Scaffold Flutter feature screens with controller and UI separation.

Official
Intermediate
MHD-Nour-KJMHD-Nour-KJ

flutter-animation-transition-performance

Optimize Flutter animations and transitions for consistent frame rates.

Community
Advanced
fernando-bertholdofernando-bertholdo
2

animation-motion

Apply a structured UI motion framework for designing and reviewing animations.

Community
Advanced
VGonPaVGonPa
2

animating-flutter-ui

Implement implicit and explicit animations in Flutter applications.

Community
Intermediate