AnimatedBuilder In Flutter

In this Blog we will learn about how to create AnimatedBuilder In Flutter.

Introduction

AnimatedBuilder is a widget which is use for building animation in flutter. The AnimatedBuilder Widget is basically needful for more complex widget.

You may also check our Flutter app Development services.

Implementation

First of all we need to create new flutter project.

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

Now we need to create the UI of AnimatedBuilderPage, So now 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 task 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 second one is builder and the child is optional which can pass or not.