Now we have a smoothly fading background. Let’s add some beautiful waves that animates really awesome. Take a look how we achieve this:

These are actually three single waves that are overlaying each other. We need to assure that they differ from each other to create the wave illusion. So we need properties for a WaveAnimation widget:

speed : to control the animation duration of a wave pass

: to control the animation duration of a wave pass height : to set the area in which the wave acts

: to set the area in which the wave acts offset: a shift in the x-axis to give a wave different “start position”

Next we need to cover some math. Every time you like to have something periodical in combination circular there should one answer: trigonometric functions.

For our animation we animate a value from 0.0 to 2*pi and put that value into a sine function. We sample y-values on three positions: the left side, the middle and the end. From left to right we cover an interval of one pi, so we can always see the half of one whole sine wave.

Why do we sample three positions? We will draw a path! And I made a visualization for you:

We start our path top left (purple) and line a quadratic bézier function to the right top (red). It’s a build in path-method of Flutter’s Canvas. It expects us to specify a “control point” (green). Then we go straight down to bottom right (orange) and straight to left bottom (yellow). Finally we close the path so it connects with the start point (purple).

When you just focus on the purple, green and red dots, you can see our sampled positions and it’s sine wave magic behind it.

Quadratic bézier functions might seem spooky at first moment. But he just tries to draw a straight line (blue) from purple to red. And the more it reaches the green dot, some kind of gravity effects the actual line (grey shape). As the result, the line getting softly bend over. That’s all.