i have got this path in flutter .

firstly i would like it to be straight which is accomplished , then the left curve but when i try to curve it again it won’t work , i would like the curves to be dynamic left and right based on a number i pass to the custompaint i have . and then animate it to be like its being drawn along the container that holds it .

here is the code :

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Scrollable Custom Paint Example'),
        ),
        body: Center(
          child: SingleChildScrollView(
            child: CustomPaint(
              size: Size(200, 200), // Set the height as per your requirement
              painter: DynamicPathPainter(
                numberOfCurves: 10, // Set the number of curves
                curveSpacing: 0.1, // Set the spacing between the curves (fraction of the screen height)
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class DynamicPathPainter extends CustomPainter {
  final int numberOfCurves;
  final double curveSpacing;

  DynamicPathPainter({required this.numberOfCurves, required this.curveSpacing});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 10.0;

    Path path = Path();
    path.moveTo(size.width / 2, 0); // Start at the middle top of the screen

    double currentHeight = size.height * 0.3; // Initial straight section height
    path.lineTo(size.width / 2, currentHeight); // Draw the initial straight line

    // Define control points and end point for the first cubic Bezier curve (curve to the left)
    Offset controlPoint1 = Offset(size.width / 2, size.height * 0.5);
    Offset controlPoint2 = Offset(size.width / 2 - 150, size.height * 0.8);
    Offset endPoint1 = Offset(size.width / 2 - 200, size.height);

    // Add the first cubic Bezier curve
    path.cubicTo(controlPoint1.dx, controlPoint1.dy, controlPoint2.dx, controlPoint2.dy, endPoint1.dx, endPoint1.dy);

    // Define control points and end point for the second cubic Bezier curve (curve back to the right)
    Offset controlPoint3 = Offset(size.width / 2 - 250, size.height * 1.2);
    Offset controlPoint4 = Offset(size.width / 2, size.height * 1.1);
    Offset endPoint2 = Offset(size.width / 2 + 50, size.height * 1.2);

    // Add the second cubic Bezier curve
    path.cubicTo(controlPoint3.dx, controlPoint3.dy, controlPoint4.dx, controlPoint4.dy, endPoint2.dx, endPoint2.dy);

    // Define control points and end point for the third cubic Bezier curve (curve back to the right again)
    Offset controlPoint5 = Offset(size.width, size.height * 1.2);
    Offset controlPoint6 = Offset(size.width / 2 + 200, size.height * 1.2);
    Offset endPoint3 = Offset(size.width / 2 + 150, size.height * 1.5);

    // Add the third cubic Bezier curve
    path.cubicTo(controlPoint5.dx, controlPoint5.dy, controlPoint6.dx, controlPoint6.dy, endPoint3.dx, endPoint3.dy);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}
when i try to add anything based on the number of curves the output is not what i expect at all .
``` [![enter image description here][1]][1]


  [1]: https://i.sstatic.net/1ZNCL23L.png