Here’s how you can animate your Flutter widgets to make your app stand out from the rest with ease.
Animations are the icing on your app cake. Fortunately, the Flutter team has put a lot of effort into making animations as easy as possible. In this article, I’ll show you how it’s done. I’ll also provide a sample application at the end, so you can try out everything discussed in this guide.
There are already many widgets available in the framework that are specifically designed to use animations. You can find them in the Flutter widget index, and they all start with the prefix Animated. We will discuss the following ones:
But wait… there are more animation widgets in the index list. Why don’t we cover these as well?
The widgets in my list work similarly and are super easy to use. The other ones require more setup and code. Sometimes, you even have to test the entire animation yourself. We’ll cover the advanced stuff in a future article.
How do these widgets work?
Let’s take the
AnimationContainer as an example. If you use a normal Container widget and you change a property like its height, the new height will be visible immediately after a rebuild.
Animation widget however will not jump to the final value but set values between the starting and the final value. The values are influenced by the duration of an animation and the selected Curve function.
You don’t have to worry about intermediate values or frame rates to make your animation smooth. Just set a desired value, choose a duration, and select an animation curve. The widget will do the rest. It’s really simple!
If you know how one widget works, you also know how the others work!
Below is some code to show you how it essentially works:
double _width = 300;
width: _width, // this is the value that will be animated when changed
duration: const Duration(seconds: 1),
_width = 400; // set a new value and trigger a rebuild
What can I animate with these widgets?
Depending on what you want to do, you need to choose the right widget. The widget names sometimes already tell what you can animate with them. Here is a short overview what every widget can do. Check the documentation for exceptions and pitfalls.
- AnimatedAlign supports the
Alignmentproperty (for example
- AnimatedContainer supports many properties like
- AnimatedCrossFade has two properties
secondChild. It will animate between these widgets when the
crossFadeStateproperty is changed.
- AnimatedDefaultTextStyle supports the
styleproperty to animate
- AnimatedOpacity supports the
opacityproperty. It should be between 0 (invisible) and 1 (completely visible).
- AnimatedPhysicalModel supports the
- AnimatedPositioned supports the
rightproperties, but it only works inside a
- AnimatedSize supports the
Have a look at my demo application to see all these widgets in action.
A curve defines changes in value over time. This is how your animation will look. With a linear curve, your animation will look smooth without any gaps or jumps. However, there are also curves that start slow and get faster at the end, for example. The documentation provides sample videos for every predefined curve. With so many options, you won’t feel the need to write your own curve.
All presented widgets have a
Curve property that can be used to specify the desired animation function.
The Flutter team made animations really easy with so many predefined widgets. With this guide, you should be able to handle them. If you want to play around with the different widgets and animations functions, check out my demo application on GitHub.