Animations in Flutter

4 min readSep 30, 2020

Introduction

In this blog, we’re going to implement some examples of basic animations in Flutter.

Well-designed animations make a UI feel more intuitive, contribute to the slick look and feel of a polished app, and improve the user experience. Flutter’s animation support makes it easy to implement a variety of animation types. Many widgets, especially Material widgets, come with the standard motion effects defined in their design spec, but it’s also possible to customize these effects.

Choosing an approach

There are different approaches you can take when creating animations in Flutter. Which approach is right for you?

Animation types

Generally, animations are either tween- or physics-based. The following sections explain what these terms mean, and point you to resources where you can learn more.

Tween animation

Short for in-betweening. In a tween animation, the beginning and ending points are defined, as well as a timeline, and a curve that defines the timing and speed of the transition. The framework calculates how to transition from the beginning point to the end point.

Let’s Start

First, we’ll see very simple rotation animation.

Create home_screen.dart file and copy the following code inside it

In initState() method, _arrowAnimationController is initialised with duration of animation equal to 300 milliseconds.

After that, _arrowAnimation is initialised with begin value of 0.0 and end value of pi (value = 180) so that, it will rotate by 180 degrees.

Now, comes the layout part of the screen, paste the following code inside build() method

Now, let’s create firstChild() Widget, where the actual widget will be present that contains a widget that needs to be animate and another widget that starts the animation.

In the given code, first child of Row is Icon that needs to be animated and it is wrapped with AnimatedBuilder widget.

AnimatedBuilder widget is a widget that is useful for building animations. It is more effective and efficient way of animating any Widget than calling setState() method on each change in value of animation.

2 properties of AnimatedBuilder widget are specified in the given code —

animation — It expects a animationController that is responsible for controlling animation. In this case, we’ve specified _arrowAnimationController which controls the arrow animation which we’re implementing
builder — It’s a callback function which is called everytime the value of animation changes. In the builder function, we’re returning Icon widget which is wrapped with Transform.rotate() widget.

Transform.rotate() widget is a special type of widget that transforms its child using a rotation with respect to center using its angle property which specify the angle by which the widget needs to be rotated

Now, another widget in the Row is OutlineButton which is used for starting the animation. In the onPressed() callback, we’re checking if the given animation is completed, and, if the button is again clicked, then the animation is reversed else just start the animation in forward direction

Now, let’s see a beating heart animation…

In home_screen.dart file, create two more variables _heartAnimation and _heartAnimationController of Animation and AnimationController respectively.

Inside initState() method, _heartAnimationController is initialised with duration of 1200 milliseconds. After that, _heartAnimation is initialised with the begin and end value of 150.0 and 170.0 and then, CurvedAnimation is specified with bounceOut curve, so that, the heart icon will show some bouncing effect

And atlast, we’re attaching the statusListener with _heartAnimationController, and checking if _heartAnimation is completed, then, we’re repeating the animation.

You can copy the below code for home_screen.dart file.

main.dart file

animated_screen.dart

And, the final app looks like this.