What is the purpose of the AnimatedBuilder widget in Flutter?

Overview

AnimatedBuilder

Basic Usage

dartCopy
class SpinningWidget extends StatefulWidget {
  @override
  _SpinningWidgetState createState() => _SpinningWidgetState();
}

class _SpinningWidgetState extends State<SpinningWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

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

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Transform.rotate(
          angle: _controller.value * 2 * 3.14, // 0 to 2π
          child: child, // 'child' doesn't rebuild!
        );
      },
      child: Icon(Icons.refresh, size: 48), // Built once, passed into builder
    );
  }
}

Why AnimatedBuilder?

Without

AnimatedBuilder

addListener

setState

dartCopy
// ❌ Without AnimatedBuilder — rebuilds entire widget
_controller.addListener(() {
  setState(() {}); // Forces complete rebuild
});

dartCopy
// ✅ With AnimatedBuilder — only rebuilds what changed
AnimatedBuilder(
  animation: _controller,
  builder: (context, child) {
    return Transform.scale(
      scale: _controller.value,
      child: child,
    );
  },
  child: ExpensiveWidget(), // ✅ Only built once!
)

Animation with Tween

dartCopy
late AnimationController _controller;
late Animation<double> _fadeAnimation;
late Animation<Offset> _slideAnimation;

@override
void initState() {
  super.initState();
  _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 600));
  _fadeAnimation = Tween<double>(begin: 0, end: 1).animate(_controller);
  _slideAnimation = Tween<Offset>(begin: Offset(0, 0.5), end: Offset.zero)
      .animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));
  _controller.forward();
}

@override
Widget build(BuildContext context) {
  return AnimatedBuilder(
    animation: _controller,
    builder: (context, child) {
      return FadeTransition(
        opacity: _fadeAnimation,
        child: SlideTransition(
          position: _slideAnimation,
          child: child,
        ),
      );
    },
    child: Text('Animated!', style: TextStyle(fontSize: 24)),
  );
}

AnimatedBuilder vs Transition Widgets

AnimatedBuilder

FadeTransition

SlideTransition

RotationTransition

ScaleTransition

Key Tip: Always pass the non-animated

textCopy

child

to

textCopy

AnimatedBuilder

— it only builds that child once, making animations efficient even in complex widget trees.