Introduction
In this blog, we’re going to implement some examples of basic animations in Flutter. In the previous article, I explained some basic concepts of animation which needs to be understand before diving into animation. So, if you want to understand those concepts of animation, head over to that article.
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 initialise 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
https://gist.github.com/flutter-devs/2473e9cc9cf4c2e139e177ca7790566b#file-home_screen-dart
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.
https://gist.github.com/flutter-devs/43b76678d571495574a857b834bc8e7c#file-home_screen-dart
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…
https://gist.github.com/flutter-devs/f0243fffac2d4a5fdc349336090fe01b#file-home_screen-dart
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.
Now, we’ll attach this animation with a heart icon
https://gist.github.com/flutter-devs/89e362502fef09502479896e3f006268#file-home_screen-dart
Inside, secondChild() widget, first child of Row is heart icon on which we’ve to show animation. It is wrapped with AnimatedBuilder widget so that it will animate according to the given animation. In the size of Icon, _heartAnimation.value is specified which means that as soon as the value of _heartAnimation changes, size of icon will also change with the _heartAnimation value.
Second child of Row is OutlineButton which is responsible for starting the heartAnimation. And finally, override dispose() method, and dispose both AnimationController objects.
https://gist.github.com/flutter-devs/77a412b8927fc7c7c53ef2a9f3ec3710#file-home_screen-dart
Now, let’s move on to another animation which is a little bit complex…
Inside home_screen.dart file, add another OutlineButton which is responsible for navigating to another screen where we’ll see another beautiful animation.
https://gist.github.com/flutter-devs/9dbb73e4997b17d6cb846fb34a50483c#file-home_screen-dart
Inside AnimatedScreen class, we’ll create these two animations
- Let’s create the first animation…
In both these animations, 3 animations are happening simultaneously —
- First, Container size is increasing
- Second, Container radius is changing
- Third, Container colour is changing
Paste the following code inside AnimatedScreen class –
https://gist.github.com/flutter-devs/1e3fe5e5b266e7870c688c58dd4d7037#file-home_screen-dart
Declare 3 Animation objects — _containerRadiusAnimation, _containerSizeAnimation, _containerColorAnimation and one AnimationController object — _containerAnimationController
Inside initState() method, _containerAnimationController is initialised with the duration of 5 seconds.
After that, _containerRadiusAnimation is initialised with BorderRadiusTween which interpolates between two BorderRadius values. Here, in begin value BorderRadius of Container is 100.0 so that initially it appears as a circle and in end value BorderRadius of Container is 0.0, so that at last, it appears as a rectangle. And finally we’re attaching _containerAnimationController with _containerRadiusAnimation.
Now, _containerSizeAnimation is initialised with Tween which interpolates between two double values. Here, begin value is 0.0 so that the size of Container remains 0.0 initially and end value is 2.0. And finally we’re attaching _containerAnimationController with _containerSizeAnimation.
Now, _containerColorAnimation is initialised with ColorTween which interpolates between two Color values. Here, in begin value Color of Container is black and in end value Color of Container is white. And finally we’re attaching _containerAnimationController with _containerColorAnimation.
And finally, we’re starting the animation.
Now, let’s attach the animation with the Container…
https://gist.github.com/flutter-devs/5614a44031e44c896af5256e9ff362d4#file-animated_screen-dart
AnimatedBuilder is specified in the body of Scaffold and in the builder callback, Container is returned. In the transform property, Translation matrix is specified and value of x-coordinate is _containerSizeAnimation.value * width which means that initially, the x coordinate will be 0.0 and atlast, value of x coordinate will be 2 * (screenWidth) — 200.0 and value of y and z coordinate is 0.0 which means that it’ll only change it’s x coordinate (move horizontally).
Width and height of Container is _containerSizeAnimation.value * height which means that it’ll gradually increase it’s size. At last, value of borderRadius is _containerRadiusAnimation.value which means that borderRadius of Container will decrease from 100.0 to 0.0
That’s all, This will create the following animation
Now, to create second animation, just remove the transform property of Container and see the effect. That will create following animation.
Complete code is available here
https://github.com/flutter-devs/flutter_animation_example
I got something wrong? Mention it in the comments. I would love to improve.
If you learnt even a thing or two, clap your hands 👏 as many times as you can to show your support!
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.
