flutter-animations

Implement implicit, explicit, hero, staggered, and physics-based animations in Flutter.

2|Updated Mar 21, 2019
One-click install
npx skills add https://github.com/jrollin/dotfiles --skill flutter-animations-jrollin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: flutter-animations
Source: https://github.com/jrollin/dotfiles/tree/main/claude/.claude/skills/flutter-animations
Command: npx skills add https://github.com/jrollin/dotfiles --skill flutter-animations-jrollin

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive guide to implementing animations in Flutter, enabling developers to create engaging and visually appealing user interfaces by adding motion and visual effects.

Core Features & Use Cases

  • Animation Types: Covers implicit (AnimatedContainer, AnimatedOpacity), explicit (AnimationController, Tween), hero, staggered, and physics-based animations.
  • Workflow Guidance: Offers decision trees for choosing the right animation type.
  • Best Practices: Includes tips for performance, accessibility, and user experience.
  • Use Case: Implement a smooth shared element transition between a list of product images and their detail pages, or create a dynamic loading indicator using physics-based animations.

Quick Start

Use the flutter-animations skill to implement a fade-in animation for a Flutter widget.

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?

Choosing between implicit and explicit Flutter animations depends on your control needs. Use implicit animations like AnimatedContainer for simple state-driven transitions, and explicit animations with AnimationController for complex, orchestrated motion sequences.

How do I create a shared element transition for product images in Flutter?

Create a shared element transition for product images using Flutter Hero animations. This animates a widget from a list page to its detail page seamlessly, maintaining visual continuity and enhancing user experience.

What's the best way to build a dynamic loading indicator in Flutter?

The best way to build a dynamic loading indicator in Flutter is using physics-based animations. This approach applies real-world physical properties to your motion design, creating natural and engaging UI loading effects.

Can I implement staggered animations in Flutter without external dependencies?

Yes, you can implement staggered animations in Flutter without external dependencies. The framework supports staggered motion natively by chaining multiple AnimationController instances or Tweens to create sequential visual effects.

What are the performance best practices for Flutter UI animations?

Performance best practices for Flutter UI animations include minimizing rebuilds, using Tweens efficiently, and respecting accessibility settings. Properly managing AnimationController lifecycles ensures smooth 60fps motion without jank.

When should I avoid using AnimationController in Flutter?

Avoid using AnimationController in Flutter when a simple state change meets your needs. If a widget only requires fading or resizing based on a single state value, implicit animations like AnimatedOpacity are more efficient and require less boilerplate.