⚠ This article covers a previous version of Simple Animation. The basics stay the same but class names have changed.

The Flutter team currently started video series about animation. Since it doesn’t covers 3rd party animation libraries, I want to share an example created with the Simple Animations package.

The animation we want to create

We want to animate a bar chart where each bar is animated separately. The bars grow with the same velocity. That means each animation has a different animation duration.

We start off by creating a widget Bar . It takes two parameters:

the relative height of the bar (value between 0.0 and 1.0 )

of the bar (value between and ) the label text shown below

Then we define two constants:

_baseDurationMs the time a bar of height 1.0 takes to animate

the time a bar of height takes to animate _maxElementHeight the pixel value of a bar with height 1.0

It looks like this: