How To Use Animations And Animated Widgets In Flutter Apps

Introduction Link to heading

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 Link to heading

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? Link to heading

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
});

What can I animate with these widgets? Link to heading

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 Link to heading

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 Link to heading

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.

GitHub - xeladu/flutter_animations Link to heading

Contribute to xeladu/flutter_animations development by creating an account 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

How to add swipe to dismiss in Flutter apps for a better UX Link to heading

Here is how you can implement the swipe-to-dismiss pattern in ListViews of a Flutter applications.

Boost your Flutter apps to the max with these 6 performance tips Link to heading

Get smoother scrolling and animations, less memory consumption, and more execution speed with these performance tips for Flutter apps.

How to add a Google Map to your Flutter app Link to heading

In this article, we are adding a Google Maps widget to our app and use location services to display our current position.