Animations in Flutter 💙
No one loves boring, dull-looking apps! It’s time to learn some animations with which you can make your apps look appealing!
Adding animations to your app can be a bit difficult but exciting simultaneously! It is really a great concept to learn in Flutter! There are many ways you can add animations to your flutter app. Let’s see in this article 🥳
Flutter SDK provides 2 types of Animations: Implicit Animations and Explicit Animations.
Implicit Animations
Implicit Animations are those Animations that are already available in the Flutter SDK and you don’t have to do much of the work. It can directly be used in your application!
Explicit Animations
These are the animations that you can build on your own using AnimationBuilder, AnimationController, etc.
Let’s start with the magic!
Implicit Animations
Implicit Animations contains many in-built widgets which we can animate. Here is the list of animated widgets:
- AnimatedAlign, which is an implicitly animated version of Align.
- AnimatedContainer, which is an implicitly animated version of Container.
- AnimatedDefaultTextStyle, which is an implicitly animated version of DefaultTextStyle.
- AnimatedScale, which is an implicitly animated version of Transform.scale.
- AnimatedRotation, which is an implicitly animated version of Transform.rotate.
- AnimatedSlide, which implicitly animates the position of a widget relative to its normal position.
- AnimatedOpacity, which is an implicitly animated version of Opacity.
- AnimatedPadding, which is an implicitly animated version of Padding.
- AnimatedPhysicalModel, which is an implicitly animated version of PhysicalModel.
- AnimatedPositioned, which is an implicitly animated version of Positioned.
- AnimatedPositionedDirectional, which is an implicitly animated version of PositionedDirectional.
- AnimatedTheme, which is an implicitly animated version of Theme.
- AnimatedCrossFade, which cross-fades between two given children and animates itself between their sizes.
- AnimatedSize, which automatically transitions its size over a given duration.
- AnimatedSwitcher, which fades from one widget to another.
For example, if we consider AnimatedContainer, it animates the properties of the container whenever it is rebuilt. So, let’s suppose that you want to change the height of the container when the user taps on it. When this happens, and if you are using AnimatedContainer, the height of the container will be changed but with simple animation.
The above example changes the container's height, width, color, and alignment when the user taps on it.
Explicit Animations
Explicit Animations are the animations where you have to sharpen your mind, get to work and create your own animations using AnimationController. This class lets you perform tasks such as:
- Play an animation forward or in reverse, or stop an animation.
- Set the animation to a specific value.
- Define the upperBound and lowerBound values of an animation.
- Create a fling animation effect using a physics simulation.
By default, an AnimationController linearly produces values that range from 0.0 to 1.0, during a given duration. The animation controller generates a new value whenever the device running your app is ready to display a new frame (typically, this rate is around 60 values per second).
To use AnimationController, you have to extend your class with TickerProviderStateMixin.
Hence, let’s suppose you want to show a bouncing ball effect, then you can initialize your animationController and run the animation in initState.
In the above code example, we initialized the controller in initState and then called the repeat method available on the controller. This would repeat the animation once the value reaches the upperBound. Inside the container, we have used controller.value to get the current value of the controller and use it as the margin value.
Don’t stop, until you are breathing!💙
- Abhishek Doshi
