AnimatedBuilder Widget – Flutter Widget Guide By Flutter Agency

• Flutter Widget Guide

Earlier we have been through CupertinoTextField Widget so now in this article we will learn about AnimatedBuilder Widget in detail.

What is AnimatedBuilder Widget?

AnimatedBuilder Widget is a general-purpose widget for building animations.

AnimatedBuilder Widget is useful for more complex widgets that wish to include animation as part of a larger build function. To use AnimatedBuilder, simply construct the widget and pass it a builder function.

AnimatedBuilder, a widget that uses a builder callback to rebuild whenever a given Listenable triggers its notifications. This widget is commonly used with Animation subclasses, hence its name, but is by no means limited to animations, as it can be used with any Listenable. It is a subclass of AnimatedWidget, which can be used to create widgets that are driven from a Listenable.

The Default Constructor of it will look like below:

AnimatedBuilderWidget({
  Key key,
  @required Listenable animation,
  @required TransitionBuilder builder,
  Widget child,
});

In Above Constructor all fields marked with @required must not be empty.

Properties:

• Key key: key represents the how one widget should replace another widget in a tree.
• TransitionBuilder builder: It will be called every time when animation changes its value.
• Listenable animation: An animation is an object that maintains a list of listeners. The listeners are typically used to notify clients that the object has been updated.

There are two variants of this interface:

• ValueListenable, an interface that augments the Listenable interface with the concept of current value.
• Animation, an interface that augments the ValueListenable interface to add the concept of direction forward or reverse direction.

Many classes in the Flutter API use or implement these interfaces. The following subclasses are especially relevant:

• ChangeNotifier, which can be subclassed or mixed in to create objects that implement the Listenable interface.
• ValueNotifier, which implements the ValueListenable interface with a mutable value that triggers the notifications when modified.
• Widget child: The child widget to pass to the builder. If a builder callback’s return value contains a subtree that does not depend on the animation, it’s more efficient to build that subtree once instead of rebuilding it on every animation tick. If the pre-built subtree is passed as the child parameter, the AnimatedBuilder will pass it back to the builder function so that it can be incorporated into the build. Using this pre-built child is entirely optional, but can improve performance significantly in some cases and is, therefore, a good practice.

How to use AnimatedBuilder Widget in Flutter?

The following code snippet tells us how to implement AnimatedBuilder Widget in Flutter.

Consider a code snippet like below with the help of Example as below.

Create a Stateful Widget like a below and define a initState() and dispose() will have a code snippet like below:

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

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

Now a build() will have a code snippet like below:

return Center(
  child: AnimatedBuilder(
    animation: _controller,
    child: new Container(
      width: 200.0,
      height: 200.0,
      color: Colors.orangeAccent,
    ),
    builder: (BuildContext context, Widget child) {
      return new Transform.rotate(
        angle: _controller.value * 2.0 * math.pi,
        child: child,
      );
    },
  ),
);

We will get output like below:

Animated Builder Widget

The complete Source Code will look like below:

import 'package:flutter/material.dart';
import 'dart:math' as math;

class AnimatedBuilderWidget extends StatefulWidget {
  @override
  _AnimatedBuilderWidgetState createState() => _AnimatedBuilderWidgetState();
}

class _AnimatedBuilderWidgetState extends State<AnimatedBuilderWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

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

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
        animation: _controller,
        child: new Container(
          width: 200.0,
          height: 200.0,
          color: Colors.orangeAccent,
        ),
        builder: (BuildContext context, Widget child) {
          return new Transform.rotate(
            angle: _controller.value * 2.0 * math.pi,
            child: child,
          );
        },
      ),
    );
  }
}

Conclusion:

In this article, we have been through What is AnimatedBuilder Widget in Flutter along with how to implement it in a Flutter.

Thanks for being with us on a Flutter Journey!!!

Still, need support for Flutter? We Would love to help you.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.