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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
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.
Be the first to comment.