如何将小部件剪辑到CustomPaint动画？

Question

好的，所以我在堆栈中有两个小部件，还有一个简单的CustomPaint（波形），它从下到上都是动画。对于动画，我使用补间来改变高度和其他一些东西，挥动看起来会更加自然。

我想得到的效果是，正在动画的波浪是可见的一面。下面的简单代码。单击某些按钮后，动画开始，现在我将以波浪形式显示带有红色的容器。就像将带有红色容器的剪辑到动画的波上一样。

该视频https://www.youtube.com/watch?v=1AxXF038-lY&t=685s

中的效果

               Container(
                  width: width,
                  height: height,
                  color: Colors.blue,
                ),
                Positioned(
                  bottom: 0,
                  child: Opacity(
                    opacity: opacityWave,
                    child: Container(
                      width: width,
                      height: animationHeight.value,
                      child: CustomPaint(
                        size: animation.value,
                        painter: ShapePainter(
                            sizeHeight: animationNumber.value,
                        ),
                      ),
                    ),
                  ),
                ),
                Opacity(
                  opacity: opacityWave,
                  child: Container(
                    width: width,
                    height: height,
                    color: Colors.green,
                  ),
                ),

class ShapePainter extends CustomPainter{
  ShapePainter({this.sizeHeight});

  final double sizeHeight;

  @override
  void paint(Canvas canvas, Size size) {

    var path = Path();

    var paint = Paint()
      ..color = Colors.white
      ..strokeWidth = 5
      ..style = PaintingStyle.fill
      ..strokeCap = StrokeCap.round;

    final shapeBounds = Rect.fromLTRB(0, 0, size.width, size.height);

    path..moveTo(shapeBounds.left, shapeBounds.bottom);
    path..lineTo(shapeBounds.topLeft.dx, shapeBounds.bottomLeft.dy);
    path..lineTo(0.0, size.height * sizeHeight);
    path.quadraticBezierTo((size.width * 0.2), (size.height * 0.6),
        (size.width * 0.589), (size.height * 0.70));
    path.quadraticBezierTo((size.width * 0.8), (size.height * 0.75),
        size.width, (size.height * 0.6));
    path..lineTo(shapeBounds.topRight.dx, shapeBounds.topRight.dy);
    path..lineTo(shapeBounds.bottomRight.dx, shapeBounds.bottomRight.dy);

    canvas.drawPath(path, paint);
  }


  @override
  bool shouldRepaint(ShapePainter oldDelegate) => sizeHeight != oldDelegate.sizeHeight;
}