AnimatedBuilder in Flutter

Introduction

AnimatedBuilder helps you create smooth animations by rebuilding only parts of your UI that change. It makes animations efficient and easy to manage.

When you want to animate a widget smoothly without rebuilding the whole screen.

When you have a complex widget tree but only a small part needs to animate.

When you want to separate animation logic from UI code for cleaner design.

When you want to reuse the same animation for multiple widgets.

When you want to improve app performance during animations.

Syntax

Flutter

AnimatedBuilder(
  animation: animationController,
  builder: (context, child) {
    return Transform.rotate(
      angle: animationController.value * 2 * 3.141592653589793,
      child: child,
    );
  },
  child: YourWidget(),
)

animation: The animation object that controls the animation progress.

builder: A function that rebuilds the widget tree when the animation changes. It receives the current context and a child widget.

child: The widget that does not change during animation, passed to builder for efficiency.

Examples

This example animates the opacity of a Text widget from transparent to visible.

Flutter

AnimatedBuilder(
  animation: controller,
  builder: (context, child) {
    return Opacity(
      opacity: controller.value,
      child: child,
    );
  },
  child: Text('Fade In'),
)

This example scales an icon up and down smoothly.

Flutter

AnimatedBuilder(
  animation: controller,
  builder: (context, child) {
    return Transform.scale(
      scale: controller.value,
      child: child,
    );
  },
  child: Icon(Icons.star, size: 50),
)

Sample App

This app shows a blue square with the word "Rotate" that continuously spins in a circle using AnimatedBuilder.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('AnimatedBuilder Example')),
        body: Center(
          child: AnimatedBuilder(
            animation: _controller,
            builder: (context, child) {
              return Transform.rotate(
                angle: _controller.value * 2 * 3.141592653589793,
                child: child,
              );
            },
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: const Center(
                child: Text('Rotate', style: TextStyle(color: Colors.white)),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Important Notes

Use the child parameter to pass widgets that do not change during animation to improve performance.

AnimatedBuilder rebuilds only the widgets inside the builder function, not the entire widget tree.

Always dispose your AnimationController to free resources.

Summary

AnimatedBuilder helps animate parts of your UI efficiently.

Use animation, builder, and child to control what changes and what stays the same.

It improves performance by rebuilding only necessary widgets during animation.