Explore AnimatedBuilder Widget In Flutter
I will utilize Animated Builder Widget. If you are uninformed of this, Animated Builder Widget allude to this archive here. You will presently require two additional widgets on the off chance that you need to implement animations utilizing this widget.
Animation Controller Widget — mainly characterizes the duration of the animation.
Animation Widget — mainly characterizes the type of animation and animation style
In straightforward terms, we utilize these two widgets to characterize and deal with our animations. Ensure you are trying these animations in a Stateful Widget. Additionally, remember to include SingleTickerProviderStateMixin in the class definition. This deals with our animation time.
In this article, we will Explore AnimatedBuilder Widget In Flutter. We will also implement a demo program of AnimatedBuilder Widget and how to use it in your flutter applications.
Table Of Contents::
What is AnimatedBuilder Widget?
What is AnimatedBuilder Widget?:
AnimatedBuilder Widget is a universally useful widget for building animations. AnimatedBuilder Widget is helpful for more complex widgets that wish to incorporate animation as a component of a larger build function. To utilize AnimatedBuilder, just develop the widget and pass it a builder function.
AnimatedBuilder, a widget that utilizes a builder callback to reconstruct at whatever point a given Listenable triggers its notifications. This widget is regularly utilized with Animation subclasses, henceforth its name, however, is in no way restricted to animations, as it very well may be utilized with any Listenable. It is a subclass of AnimatedWidget, which can be utilized to make widgets that are driven from a Listenable.
To get a more understanding through the help of video , Please watch:
Constructor:
To utilize AnimatedBuilder, you need to call the constructor underneath:
AnimatedBuilder({
Key? key,
required Listenable animation,
required this.builder,
this.child,
})
There are two-argument fields marked with required must not be empty.
Properties:
- > Key: This property is used to represent how one widget should replace another widget in a tree.
- > builder: This property is used to call whenever animation changes its value.
- > animation: This property is utilized to animation is an item that keeps a list of listeners. The listeners are regularly used to notify clients that the item has been updated.
- > child: This property is utilized as the widget to pass to the builder. On the off chance that a builder callback’s return esteem contains a subtree that doesn’t rely upon the animation, it’s more proficient to assemble that subtree once as opposed to revamping it on each animation tick. If the pre-constructed subtree is passed as the child boundary, the AnimatedBuilder will pass it back to the builder function so it tends to be used in the build. Utilizing this pre-assembled child is altogether discretionary, however can further develop execution essentially sometimes and is, thusly, a decent practice.
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.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
We will create a Stateful widget and the respective State class has to use SingleTickerProviderStateMixin.
class _AnimatedBuilderDemoState extends State<AnimatedBuilderDemo>
with SingleTickerProviderStateMixin {
}
To make the progress, we need to make a case of AnimationController and inside the StatefulWidget.
AnimationController _controller;
In initState() method, we will add _controller ie equal to the AnimationController(). Inside AnimationController, we will add duration will be 8seconds. Also, we will add vsyn, value, and repeat.
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 8),
vsync: this,
)..repeat();
}
In the body, we will add AnimatedBuilder() widget. In this widget, we will add an animation means an object that maintains a list of listeners. We will add _controller variable. It’s child property, we will add a Container widget. Inside the widget, we will add height, widget, and an image.
AnimatedBuilder(
animation: _controller,
child: Container(
width: 300.0,
height: 200.0,
child: Image.asset("assets/logo.png"),
),
builder: (BuildContext context, Widget child) {
return Transform.rotate(
angle: _controller.value * 2.2 * math.pi,
child: child,
);
},
),
In AnimatedBuilder() widget, we will also add builder means call whenever animation changes its value. We will pass two parameters in the bracket that was BuildContext context, Widget child. We will return a Transform.rotate() widget. In this widget, we will add angle means that give the rotation clockwise. We will add _controller.value * 2.2 * math.pi. Also, add a child. When we run the application, we ought to get the screen’s output like the underneath screen video.
Code Files:
import 'package:flutter/material.dart';
import 'dart:math' as math;
import 'package:flutter_animated_builder_demo/splash_screen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class AnimatedBuilderDemo extends StatefulWidget {
@override
_AnimatedBuilderDemoState createState() => _AnimatedBuilderDemoState();
}
class _AnimatedBuilderDemoState extends State<AnimatedBuilderDemo>
with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 8),
vsync: this,
)..repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.cyan,
automaticallyImplyLeading: false,
title: Text("Flutter AnimatedBuilder Widget Demo"),
),
body: Center(
child: AnimatedBuilder(
animation: _controller,
child: Container(
width: 300.0,
height: 200.0,
child: Image.asset("assets/logo.png"),
),
builder: (BuildContext context, Widget child) {
return Transform.rotate(
angle: _controller.value * 2.2 * math.pi,
child: child,
);
},
),
),
);
}
}
Conclusion:
In the article, I have explained the basic structure of the AnimatedBuilder Widget in a flutter; you can modify this code according to your choice. This was a small introduction to AnimatedBuilder Widget On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the AnimatedBuilder Widget in your flutter projects. We will show you what the AnimatedBuilder Widget is?. Show a constructor and properties of the AnimatedBuilder Widget. Make a demo program for working AnimatedBuilder Widget in your flutter applications So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
