Animations

Adding animations

Animation is the process of adding motion to UI elements to enhance the interactivity of an application. Well-executed animations improve the user experience of an app by making it more intuitive and giving the user better visual feedback.

Reasons we might want to add animation to our application include:

• Giving visual feedback
• Drawing users’ attention
• Indicating ongoing background tasks
• Showing progress of given tasks
• Indicating transitions
• Storytelling and gamification

Most widgets in Flutter, especially those built following the Material Design style guide, come with standard motion effects. However, we might need to add animations to improve our app, especially our custom-made widgets.

There are mainly two kinds of animations in Flutter:

• Drawing-based animations
• Code-based animations

We’ll be diving into each of these animations next.

Drawing-based animations

These transformations include those that are not possible to do in code. Drawing-based animations are based on imported assets, such as stand-alone sprites and raster or vector-based assets. Examples of such assets include GIFs, PNGs, SVGs, Lottie, and Rive files. We can use external tools, such as Adobe After-Effects and Rive, to design these assets and then import them into our application.

Code-based animations

We can implement these animations in code. They are based on Flutter widgets and rooted in standard layout and style primitives such as layouts, colors, and styles.

Categories of code-based animations include:

• Implicit animations
• Explicit animations

Implicit animations

Implicit animations are quick to implement since they are as easy as changing a widget’s property; then Flutter will do the transformation. Flutter comes with some of the most common implicit animations as widgets, but we could very easily create our own.

Built-in implicit animations usually come in widgets named AnimatedFoo, where Foo represents the widget we are animating. Examples include but are not limited to:

• AnimatedOpacity
• AnimaitedContainer
• AnimatedPadding
• AnimatedSwitcher
• AnimatedPositioned

We’ll continue working on the contact app.