Implementing Flutter Animations

Contents

• Core Concepts

• Animation Strategies

• Workflows

• Implementing Implicit Animations

• Implementing Explicit Animations

• Implementing Hero Transitions

• Implementing Physics-Based Animations

• Examples

Core Concepts

Manage Flutter animations using the core typed Animation system. Do not manually calculate frames; rely on the framework's ticker and interpolation classes.

• Animation<T> : Treat this as an abstract representation of a value that changes over time. It holds state (completed, dismissed) and notifies listeners, but knows nothing about the UI.

• AnimationController : Instantiate this to drive the animation. It generates values (typically 0.0 to 1.0) tied to the screen refresh rate. Always provide a vsync (usually via SingleTickerProviderStateMixin ) to prevent offscreen resource consumption. Always dispose() controllers to prevent memory leaks.

• Tween<T> : Define a stateless mapping from an input range (usually 0.0-1.0) to an output type (e.g., Color , Offset , double ). Chain tweens with curves using .animate() .

• Curve : Apply non-linear timing (e.g., Curves.easeIn , Curves.bounceOut ) to an animation using a CurvedAnimation or CurveTween .

Animation Strategies

Apply conditional logic to select the correct animation approach:

• If animating simple property changes (size, color, opacity) without playback control: Use Implicit Animations (e.g., AnimatedContainer , AnimatedOpacity , TweenAnimationBuilder ).

• If requiring playback control (play, pause, reverse, loop) or coordinating multiple properties: Use Explicit Animations (e.g., AnimationController with AnimatedBuilder or AnimatedWidget ).

• If animating elements between two distinct routes: Use Hero Animations (Shared Element Transitions).

• If modeling real-world motion (e.g., snapping back after a drag): Use Physics-Based Animations (e.g., SpringSimulation ).

• If animating a sequence of overlapping or delayed motions: Use Staggered Animations (multiple Tween s driven by a single AnimationController using Interval curves).

Workflows

Implementing Implicit Animations

Use this workflow for "fire-and-forget" state-driven animations.

• Task Progress:

• Identify the target properties to animate (e.g., width, color).

• Replace the static widget (e.g., Container ) with its animated counterpart (e.g., AnimatedContainer ).

• Define the duration property.

• (Optional) Define the curve property for non-linear motion.

• Trigger the animation by updating the properties inside a setState() call.

• Run validator -> review UI for jank -> adjust duration/curve if necessary.

Implementing Explicit Animations

Use this workflow when you need granular control over the animation lifecycle.

• Task Progress:

• Add SingleTickerProviderStateMixin (or TickerProviderStateMixin for multiple controllers) to the State class.

• Initialize an AnimationController in initState() , providing vsync: this and a duration .

• Define a Tween and chain it to the controller using .animate() .

• Wrap the target UI in an AnimatedBuilder (preferred for complex trees) or subclass AnimatedWidget .

• Pass the Animation object to the AnimatedBuilder 's animation property.

• Control playback using controller.forward() , controller.reverse() , or controller.repeat() .

• Call controller.dispose() in the dispose() method.

• Run validator -> check for memory leaks -> ensure dispose() is called.

Implementing Hero Transitions

Use this workflow to fly a widget between two routes.

• Task Progress:

• Wrap the source widget in a Hero widget.

• Assign a unique, data-driven tag to the source Hero .

• Wrap the destination widget in a Hero widget.

• Assign the exact same tag to the destination Hero .

• Ensure the widget trees inside both Hero widgets are visually similar to prevent jarring jumps.

• Trigger the transition by pushing the destination route via Navigator .

Implementing Physics-Based Animations

Use this workflow for gesture-driven, natural motion.

• Task Progress:

• Set up an AnimationController (do not set a fixed duration).

• Capture gesture velocity using a GestureDetector (e.g., onPanEnd providing DragEndDetails ).

• Convert the pixel velocity to the coordinate space of the animating property.

• Instantiate a SpringSimulation with mass, stiffness, damping, and the calculated velocity.

• Drive the controller using controller.animateWith(simulation) .

Examples

class StaggeredAnimationDemo extends StatefulWidget { @override State<StaggeredAnimationDemo> createState() => _StaggeredAnimationDemoState(); }

class _StaggeredAnimationDemoState extends State<StaggeredAnimationDemo> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<double> _widthAnimation; late Animation<Color?> _colorAnimation;

@override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, );

// Staggered width animation (0.0 to 0.5 interval)
_widthAnimation = Tween<double>(begin: 50.0, end: 200.0).animate(
  CurvedAnimation(
    parent: _controller,
    curve: const Interval(0.0, 0.5, curve: Curves.easeIn),
  ),
);

// Staggered color animation (0.5 to 1.0 interval)
_colorAnimation = ColorTween(begin: Colors.blue, end: Colors.red).animate(
  CurvedAnimation(
    parent: _controller,
    curve: const Interval(0.5, 1.0, curve: Curves.easeOut),
  ),
);

_controller.forward();

}

@override void dispose() { _controller.dispose(); // CRITICAL: Prevent memory leaks super.dispose(); }

@override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (context, child) { return Container( width: _widthAnimation.value, height: 50.0, color: _colorAnimation.value, ); }, ); } }

Route createCustomRoute(Widget destination) { return PageRouteBuilder( pageBuilder: (context, animation, secondaryAnimation) => destination, transitionsBuilder: (context, animation, secondaryAnimation, child) { const begin = Offset(0.0, 1.0); // Start from bottom const end = Offset.zero; const curve = Curves.easeOut;

  final tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
  final offsetAnimation = animation.drive(tween);

  return SlideTransition(
    position: offsetAnimation,
    child: child,
  );
},

); }

// Usage: Navigator.of(context).push(createCustomRoute(const NextPage()));