Flutter Animations
Tags: flutter, animation, ux, dart
Published: 2023-07-05 17:23:09


**Movement represents life** or makes us thing about life. If something is static, we probably wont interact with it as easily as we do with things that have some motion. 

Humans interact with digital products in a daily basis, so inlcuding Animations in our applications is important since they 

- make interactions more intuitive and natural
- provide user feedback and a nice user experience


## What is an Animation?

We all relate animation to movement, but in programming what does it really mean?

Well... an animation is defined as point **values that change over time**. 

![curve](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdycrmncv9s81fui4occ.gif)


## Animations
There are 2 types of animations

**1. Drawing-based animations**
**2. Code-based animations**

**Drawing-based animations** can be achieved by using some libraries and programs like lottie, flare, etc

![Cat and Butterfly](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7so7bezluyda00zcry2.gif)

In this article, we will focus on **code-based animations** in Flutter 

![Loader](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40znlcmfz5dldyzxarro.gif)

## Flutter animations

![Flutter animation types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvfvu3i78ocxdd5q7lpy.png)


### 1. Implicit Animations
For Implicit Animations you are in charge only for **setting the new value** of the property you are animating according to some validation. They are called implicit because the framework does all the math for transitioning between starting and end points for the given curve. 
This property can be size, opacity, aligment, color, etc. 

In this example, we have an animated container whose child is an image, this container shrinks when clicked:

![code container shrinking](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2i793w6012oig0gioh6u.png)
![Robot in container](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iof9yblwflhswg7g9fiz.gif)


In order to achieve an implicit animation, Flutter provides an extensive catalogue  of built-in animated widgets, where you only change the value of the animated property, as mentioned above. 


These animated widgets are named as ["Animated"${widgetName}]
![AnimatedSomething](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kubzdeqh58ga00j39ekc.png)


Some built-in animated widgets are:

- AnimatedAlign
- AnimatedBuilder
- AnimatedContainer
- AnimatedOpacity
- AnimatedPadding
- AnimatedPositioned
- AnimatedRotation
- AnimatedScale
- AnimatedSize
- AnimatedSlide
- AnimatedSwitcher

check the full list of built-in animated widgets and documentation [here](https://api.flutter.dev/flutter/widgets/AnimatedWidget-class.html)


#### Custom Implicit animations 
You can also build Custom Implicit animations by using **Tween Animation** (Tween stands for **in-betweening**).
To make it custom, **define the initial points and the end points** of the animation, as well as the curve and duration.

these beginning and end "points" can be properties too, as a colors, for example. 

See that the colors in between are never explicitly defined, but calculated by the framework:


![code button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9n35naxfthavg0og69lc.png)
![Button changing color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pglu1vaw2yj2kaqvu8qj.gif)

#### Staggered animations
It is possible to chain sequences of tweens into the animation, to achieve more changes in the animation. 

![tween sequence](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae1vcp1rdwyes91rpfdx.gif)

#### When to use Implicit animations 
Use implicit animations when you need it to start and finish after some interaction event. These animations does not repeat indefinitely.

### 2. Explicit Animations
In the Explicit Animations you are in charge of declaring an **Animation Controller** that will allow you to control the animation.

*Control the animation how?*
You can make it go forward, reverse it, repeat it, or stop it. This is why they are called explicit animations, because you define explicitly how and when the animation should behabe.

![code cd](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apc44pssccpvueyksu2d.png)
![cd rotating](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ra97vlcfqp7v4c0aghy.gif)


In order to achieve an explicit animation, Flutter provides an extensive catalogue of built-in transitioning widgets


![built-in transitioning widgets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flmqlo7ns99tndajc93y.png)

Some built-in transitioning widgets are:

- AlignTransition
- FadeTransition
- PositionedTransition
- ScaleTransition
- SizeTransition
- RotationTransition
- SlideTransition

check these widgets documentation [here](https://docs.flutter.dev/ui/widgets/animation)

#### Custom Explicit animations 
You can also build Custom Explicit animations by using **Animated Builder**.

![Code star](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ci4ievfygxkgxx6swfwo.png)
![Star shining](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5d4wc6x9uk31i149em17.gif)

#### When to use Explicit animations 
Use explicit animations when you need it to

- do indefinite repetition
- discontinuity (as you can control if it starts or stops)

## Curves
![curves](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vq37ntpu1x2tnthr46wb.gif)

Check available animation curves [here](https://api.flutter.dev/flutter/animation/Curves-class.html)

and check [this documentation](https://api.flutter.dev/flutter/animation/animation-library.html) for more!

Thanks for reading this article, hopefully you found it helpful 🦋