Flutter CustomPaint Moving a circle along a path

Question

I'm learning CustomPaint by making my own line chart. I have already made the chart itself so now i'm making the things around it. One them is a trackball/line whenever you pan. So far i've made the dashed line from top to bottom, and it works perfectly, now i want to make the the ball that's gonna follow along with the line. My problem is getting the ball and dashed line to always be in sync. right now it's the dashed line that follows my finger and the ball that does'nt match up. I found this answer on stack overflow but it's not working quite right for me. This video is how it currently functions with the following code,

where dragX is the current x-axis position of your finger in pixels.

void drawTrackballLine(Canvas canvas, Size size) {
    double dashHeight = 5;
    double dashSpace = trackBallOptions.dashSpacing;
    double y = 0;
    final paint = Paint()
      ..color = trackBallOptions.color
      ..strokeWidth = trackBallOptions.strokeWidth;
    while (y < size.height) {
      canvas.drawLine(
        Offset(dragX, y),
        Offset(dragX, y + dashHeight),
        paint,
      );
      y += dashSpace + dashHeight;
    }
}

void drawTrackball(Canvas canvas, Size size, Path path) {
    final pathMetric = path.computeMetrics().elementAt(0);
    final value = pathMetric.length * (dragX / size.width);
    final pos = pathMetric.getTangentForOffset(value);
    canvas.drawCircle(pos!.position, 5, Paint());
}