How to do this.

First, implement with single wave.

What clipper: https://docs.flutter.io/flutter/rendering/CustomClipper-class.html

Clip view

Define wave:

wave

In here I using sin function to generate wave value.

Each point behavior:

x will be fixed with width of view

y will be generated by sin function depend on time, value in 2 x hight of wave

Wave moving animation: https://de.wikibooks.org/wiki/Physik_Oberstufe/_Schwingungen_und_Wellen/_Mechanische_Wellen

Funtion gen wave value with time

for (int i = 0; i <= screenSize.width; i++) {

sinWave.add(new Offset(i.toDouble(),

sin((time.value * 360 - i) % 360 * degrees2Radians) * 20));

}

Apply clipper to ClipPath:

child: new ClipPath(

child: new Container(

width: widget.screenSize.width,

height: 200.0,

color: Colors.red,

),

clipper: new WaveClipper(time.value, sinWave),

),

You can replace view to image

Second, combine 2 wave

Using Stack view to combine 2 wave view with custom offset difference x and wave hight.

Demo

Repo (demo5)

Clip