How To Use Animations And Animated Widgets In Flutter Apps

Introduction

Here’s how you can animate your Flutter widgets to make your app stand out from the rest with ease. Make your apps look nicer and present your users a better UX with animations!

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.

Animation widgets

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:

Dart

double _width = 300;

AnimatedContainer(
    curve: Curves.linear,
    width: _width, // this is the value that will be animated when changed
    height: 300,
    duration: const Duration(seconds: 1),
    child: Container());

...

setState((){
    _width = 400; // set a new value and trigger a rebuild
});

Want More Flutter Content?

Join my bi-weekly newsletter that delivers small Flutter portions right in your inbox. A title, an abstract, a link, and you decide if you want to dive in!

Click to subscribe

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 Alignment property (for example Alignment.topLeft to Alignment.bottomRight).
AnimatedContainer supports many properties like Alignment, Padding, Width, Height, Color, or BorderRadius.
AnimatedCrossFade has two properties firstChild and secondChild. It will animate between these widgets when the crossFadeState property is changed.
AnimatedDefaultTextStyle supports the style property to animate TextStyle changes.
AnimatedOpacity supports the opacity property. It should be between 0 (invisible) and 1 (completely visible).
AnimatedPhysicalModel supports the elevation property.
AnimatedPositioned supports the width, height, top, left, bottom, and right properties, but it only works inside a Stack widget.
AnimatedSize supports the size property

Have a look at my demo application to see all these widgets in action.

Curves

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.

Conclusion

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.