Animated bar chart in Flutter

⚠ 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 heightof the bar (value between 0.0and 1.0)
• the label text shown below

Then we define two constants:

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

It looks like this:

Now we can write our render function. It returns a ControlledAnimation widget that comes from the Simple Animations package. It can simply start off an animation. It takes three parameters:

• a duration (here we multiply height with _baseDurationMs to get the same velocity for all bar charts)
• a tween (that animates the values from 0.0 to our height )
• a builder function that renders our bar in each animation step (we get the “current animation value” passed in as a second parameter)

For this demo is used a very simple layout. It’s a column with an “empty space”-container, followed by a “blue-colored container” and the label.

Have a look:

That’s all. We have an animated bar. Now we can complete this example by putting some of our Bar widgets into a row:

Now we have this nicely animated bar chart. (Of course you can improve the look of the bars. I wanted the keep this example easy.)

The complete demo is available here. Feel free to clone the Simple Animations Example App and play around with some cool demos created with that 3rd party package. Or you can download it from the play store.

Bar chart demo available inside the Simple Animations Example App

Leave some claps if you liked this and want to see more posts like this.

Until next time.
— Felix —