How to use Animated Builder in Flutter

We can use Animated Builder Widget in many ways. However, firstly we need to know what is the AnimatedBuilder. Moreover, how it works.

We have already seen many examples of Implicit Animations.

Does the AnimatedBuilder belong to the same category?

We need to answer them first.

So let us start with the first question. How an AnimatedBuilder works?

The AnimatedBuilder neither renders the Animated Widget. Nor it manages the Animation object.

Then what is its main function?

The AnimatedBuilder renders the “transition”. As part of the “build” method, it describes how another Widget will animate.

We can name two most common examples of the AnimatedBuilder. The Scaffold Widget, and the TextField Widget.

Therefore, we can say that the AnimatedBuilder is a general-purpose widget for building animations.

For an example, let us see a simple instance of the AnimatedBuilder.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Animated Rotation';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const RotationTransitionExample(),
      ),
    );
  }
}

class RotationTransitionExample extends StatefulWidget {
  const RotationTransitionExample({Key? key}) : super(key: key);

  @override
  State<RotationTransitionExample> createState() =>
      _RotationTransitionExampleState();
}

class _RotationTransitionExampleState extends State<RotationTransitionExample>
    with TickerProviderStateMixin {
  late final AnimationController _controller =
      AnimationController(vsync: this, duration: const Duration(seconds: 2))
        ..repeat();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (_, child) {
            return Transform.rotate(
              angle: _controller.value * 2 * math.pi,
              child: child,
            );
          },
          child: Container(
            padding: const EdgeInsets.all(10),
            width: 250,
            height: 250,
            child: Image.network(
                'https://cdn.pixabay.com/photo/2021/11/13/23/06/tree-6792528_960_720.jpg'),
          ),
        ),
      ),
    );
  }
}

The Animated Builder inherits from the AnimatedWidget. The Animated Widget and its sub class like the AnimatedBuilder take an explicit Listenable as argument.

This Listenable is usually an Animation derived from an AnimationController.

Subsequently, the life-cycle of the AnimationController has to be managed manually.

As we have done in the above code.

We have provided the “angle” of the “Transform.rotate” Constructor manually.

builder: (_, child) {
            return Transform.rotate(
              angle: _controller.value * 2 * math.pi,
...

As a result, it starts rotating the Child Widget Image.

On the contrary, all the Implicitly Animations inherit from the ImplicitlyAnimatedWidget. The ImplicitlyAnimatedWidget and its sub classes automatically manage their own internal AnimationController.

Therefore, we do not have to provide the external Animation.

If we plan to build more complex Widgets, the Animated Builder is good. We can construct the Widget and pass it to the “builder” function.

However, if we target a single Widget for Animation, like the above, the Implicit Animation should be the choice.

For full code please visit the respective GitHub repository.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter