AnimatedBuilder in Flutter

Suraj Chauhan

17 May 2024

In this blog, we will learn about how to create AnimatedBuilder in Flutter.

Introduction

AnimatedBuilder is a widget which is used for building animation in Flutter. The AnimatedBuilder Widget is basically needed for more complex widgets.

You may also check our Flutter app Development services.

Implementation

First of all, we need to create a new flutter project.

After that, we need to create a StatefulWidget(AnimatedBuilderPage), and call it from the main dart.

Now we need to create the UI of AnimatedBuilderPage, so we add the following code inside the AnimatedBuilderPage class.

class _AnimatedBuilderPageState extends State<AnimatedBuilderPage> with SingleTickerProviderStateMixin{

  late AnimationController _animationController;

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

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


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Animated Builder Demo"),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _animationController,
          builder: (BuildContext context, Widget? child) {
            return Transform.rotate(
              angle: _animationController.value * 1.0 * math.pi,
              child: child,
            );;
          },
          child: Container(
            width: 300,
            height: 300,
            child: Column(
              children: [
                Text('Mobikul Blog'),
                SizedBox(
                  width: 300.0,
                  height: 200.0,
                  child: Image.asset("assets/images/flutter.png"),
                ),
                Text('Animated Builder Demo')
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class _AnimatedBuilderPageState extends State<AnimatedBuilderPage> with SingleTickerProviderStateMixin{

late AnimationController _animationController;

@override

void initState() {

super.initState();

_animationController = AnimationController(

duration: const Duration(seconds: 15),

vsync: this,

)..repeat();

}

@override

void dispose() {

_animationController.dispose();

super.dispose();

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("Animated Builder Demo"),

body: Center(

child: AnimatedBuilder(

animation: _animationController,

builder: (BuildContext context, Widget? child) {

return Transform.rotate(

angle: _animationController.value * 1.0 * math.pi,

child: child,

);;

child: Container(

width: 300,

height: 300,

child: Column(

children: [

Text('Mobikul Blog'),

SizedBox(

width: 300.0,

height: 200.0,

child: Image.asset("assets/images/flutter.png"),

Text('Animated Builder Demo')

);

}

AnimationController:->This is a controller for an animation.

AnimationController class lets you perform tasks such as:

1)Play an animation forward or reverse or stop an animation.

2)Set the animation to a specific value.

3)Define the UpperBound and LowerBound Value for animation.

4)Create a filing animation effect using a physics simulation.

The AnimatedBuilder have two argument field is required must not be empty, the first one is animation and the second one is builder and the child is optional which can pass or not.

Now above is the Output of the Code.

Conclusion

In this article, we have discussed AnimatedBuilder.

I hope this blog is helpful in understanding this topic.

Please Visit the Link for More Additional Information about AnimatedBuilder.

Thanks for reading this Blog. You can also check other blogs from here for more knowledge.