I am learning flutter by examples and looking at some answered questions on here. I would like to achieve the below screen. I am learning from the answer to this question here

CodePudding user response：

The following CustomPainter will draw the first container on the image. You can change the x, y coordinates and get a second container.

class WavePainter extends CustomPainter {
  WavePainter({
    required this.radius,
  });

  final double radius;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..shader = const LinearGradient(colors: [
        Colors.lightGreenAccent,
        Colors.green,
      ]).createShader(Offset.zero & size);
    
    final path = Path()
      ..moveTo(0, 0)
      ..lineTo(0, size.height - 2 * radius)
      ..arcToPoint(
        Offset(radius, size.height - radius),
        radius: Radius.circular(radius),
        clockwise: false,
      )
      ..lineTo(size.width - radius, size.height - radius)
      ..arcToPoint(
        Offset(size.width, size.height),
        radius: Radius.circular(radius),
      )
      ..lineTo(size.width, 0)
      ..lineTo(0, 0)
      ..close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Use it inside widget like this:

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomPaint(
          painter: WavePainter(radius: 40),
          size: Size(200, 200),
        ),
      ),
    );
  }
}