This is the first article in the series "Animations in Flutter". As the name suggests, the series covers how to add animations to your Flutter apps, what are the fundamental differences between the options you have and how you can go about choosing the best option for you. The series will also include articles on topics that you do not necessarily need to know about but can be useful to understand how Flutter handles animations. To view the full series visit blog.nemishah.dev/series/flutter-animations.
There is a lot of material out there that explains how animations can be useful to enhance user experience, but not a lot of them explain why that is the case. Let's talk about that for a moment, think of a real world scenario of you walking into a closed room (If a general discussion on animation is not something that interests you feel free to skip to the next section). When you walk in the door doesn't just disappear, you have to interact with and and the whole experience has some amount of motion to it - the door swinging open, the contents of the room coming into view etc. When you interact with your phone, or any digital device for that matter, you subconsciously expect it to behave in the same way that other physical objects do. When things don't have any motion or interaction to them it feels like you are interacting with a piece of paper, if you play games this is often described as "ruining your immersion".
Animations help you add those tiny details of motion and design that make your applications feel like their part of a living ecosystem. Think back to when websites were just static pages with no visual feel to them, a button was just something you would click and hope that it would do somethin. Today buttons in apps and websites have some sort of visual feedback to them, reducing elevation to provide the illusion of the button being pressed for example. These days if you run into a button that does not provide visual feedback, you may think that the UI is 'broken' or that maybe you didn't tap on the button itself, this is because you are used to things behaving in a natural way (when you press on something 'pressable' in real life you expect something to happen - maybe it lights up, maybe it compresses as you press etc).
With that out of the way let's dive into what this article is about, animations in flutter.
The different types of animations in flutter
There are primarily two types of animations in flutter -
- Implicit Animations
- Explicit Animations
When going through the documentation or watching videos on the flutter youtube channel you'll often run into these two terms. Let's talk about what they mean.
Implicit Animations
Implicit animations are animations where you let the system control that actual animating of values, you just give it the end value of the animation and how long you want the animation to complete. These animations are typically the starting points you will visit when you start adding animations to your apps. Flutter provides built in widgets that help you add implicit animations, for example let's consider the AnimatedOpacity widget. The widget is the animated version of the Opacity widget, it simply lets you animate the changes in opacity of its child. Every time you update the state of the widget and provide a new opacity value the widget takes care of animating between the states itself (We will get into the actual usage side of things for implicit animations in another article). Implicit animations help keep your animated widgets clean of boilerplate code and allows for you to skip the additional optimisations that flutter typically recommends for animations (disposing on animation controllers, ensuring high fps etc).
Explicit Animations
Sometimes using the built in animation widgets just isn't enough, you may want your animations to do something different or you may want more control over the time aspect of things (pausing and reversing animations etc). In such cases you may want to build your own animation from scratch, this is what is referred to as explicit animations in Flutter. Explicit animations require you to set up, manage and dispose of the animation yourself, it also requires you to handle optimisations yourself and finally all logics of starting or updating the animation as your widget updates itself is also your responsibility. This is why it is always recommended to first ensure that your requirements cannot be met with any of the built in animation widgets before deciding to build one from scratch. Explicit animations or Explicit animation widgets almost always require you to provide an AnimationController.
Typically all implicitly animated widgets have a naming convention of AnimatedFoo where 'Foo' is the property/widget you are animating (for example AnimatedOpacity , AnimatedContainer and so on). Explicit animations usually follow the FooTransition naming convention where 'Foo' is the property you are animating (for example RotationTransition , ScaleTransition and so on)
You can find all the built in animation widgets in the official documentation.
You can find the rest of the series on blog.nemishah.dev/series/flutter-animations, and if you enjoyed reading this article you can find all my articles on my blog.
You can find me on -