Flutter Animation: Creating medium’s clap animation in flutter

Tram Ho

In this article I will introduce to you Animation and some basic concepts of Animation in Flutter. “Code base Flutter” issues I will not cover much in the article.

Getting Started

Initialize a basic Flutter project, you will have 1 Float Button and 1 Text to display every time you click the Float button.

Here we will quickly fix the interface of Button before adding Animation later.

  • Change “icon” and “background” Button
  • When you press and hold Button, the variable “_counter” will continue to increase

Look at the end product we want.

So now I need to do the following 3 jobs.

  • Change the size of “widgets”
  • Change the “background” of “widgets” when I press and hold the Button
  • Add a few small effects to make the Animation more vivid

And now we will go to solve one by one. But first you need to learn some of the version’s revelations about Aninmation in Flutter.

Concept Animation in Flutter


“Animation” is actually we change some properties of “widgets” according to the display time. Take a look at the “widgets” showing point, we need to change the “position” and “opacity” values ​​over time.

For example: the time I want Animation to do is 150ms.

Look at the chart. The value of “position” will change over time until the end of the Animation. Here we will use the component Animation Controller

Looking at this component , you can see that I want to do Animation in 150ms, so what is vsync .

Your device’s screen will “refresh” after a certain amount of time, usually a few “milliseconds”. Phone screens now have quite different scanning frequencies, but common screens will have a frequency of 60Hz (equivalent to the screen that will change 60 times in 1 second) if we change the effect out of time. When the screen changes new images to the user’s eyes, the “tearing” phenomenon may occur, the screen will display broken or inconsistent images. And the vsync: this will help solve this problem. It will synchronize Animaition change time with the “refresh” rate of the screen.

The values ​​in “Controller” will change from 0.0 -> 1.0 in 150ms.

Curved Animation

How can we turn those numbers into values ​​of the effects we desire. At this point you will need to know more about Curved Animation

I initialized the Curved animation with the parent setting “animationController”. animationController provides the time values ​​so that the Curved animation based on time values ​​gives the Animation parameter values ​​via curve: Curves.bounceIn . You can learn more about Flutter curves here

Tween Class

The values ​​the AnimationController returns are from 0.0 -> 1.0 so is there any way we can turn those values ​​into the values ​​we want to get to 0.0 -> 100.0. There are 2 ways to do this

  • The easiest way is to multiply that initial value by 100 (* 100) to get the value you want.
  • Method 2 uses a Class that converts the input value to the output value we want.

With method 2, it is time we use Tween Class

Tween Class takes 2 parameters begin: 0.0, end: 100.0 and an animationController . Tween Class will rely on the time and change value in animationController to return values ​​in the begin and end intervals. The values begin: 0.0, end: 100.0 you can change arbitrarily, can be from 0 -> 100 or from 100-> 0 .

So the basic Animation to use in Project Demo I have introduced, now is the time we will apply these Animation to implement the desired intention.

Score Widget Position Animation

First with the effect when the user touches the screen.

Look at the code above. We imagine that “Widget Score” will be moved from bottom to top when the user touches the “Float Button”.

But there is one problem here, if the user keeps clicking, the Animation of “Widget Score” will be executed many times, and there are many “Widget Score” displayed and that is not what we want. . To solve this problem, we need to add a variable or class to manage the state of the user when clicking down on the screen.

Then I will create 1 AnimationController , this AnimationController will change the position of “Widget Score” from 100-> 150. I will add “status listener” to capture when the Animation ends.

When the user lifts his hand off the screen during onTapUp event, after 300ms, I will perform scoreOutAnimationController

And we’re going to fix the onTapDown event a bit.

Back to getScoreButton now I will rely on _scoreWidgetStatus to be able to choose the AnimationController accordingly.

That is basically done, you can Run the project to see what the initial results are like. In the next section, I will introduce you more about how to change the size and add small Animation to make the Project more lively.

Share the news now

Source : Viblo