How to use animations and animated widgets in Flutter apps

Flutter category image

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.

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:

double _width = 300;

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


    _width = 400; // set a new value and trigger a rebuild

Join my free Medium Newsletter!

Get an overview of my new Medium content with my monthly newsletter. Save time and pick what you like to read!

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.


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.

Demo video of the Flutter app to try out animation widgets and functions
Demo video of the Flutter app to try out animation widgets and functions

Related articles