title: How to animate line draw in custom painter in Flutter?
body: <p>I want to animate the line drawing in custom painter canvas. So far what I can do is create two circles at two points and then create a line between those two points. But I don't know how to animate the line as if it is going from one point to the other. I have tried something but I can't make it work. Please check the code and suggest me if you have any idea.</p>
  <pre><code>import 'package:flutter/material.dart';
  import 'dart:math' as math;
  
  class ProgressMonitorAnimation extends StatefulWidget {
  
    @override
    State&lt;StatefulWidget&gt; createState() =&gt; _ProgressMonitorAnimationState();
  }
  
  class _ProgressMonitorAnimationState extends State&lt;ProgressMonitorAnimation&gt; with TickerProviderStateMixin {
  
    double _progress = 0.0;
    Animation&lt;double&gt; animation;
  
    @override
    void initState() {
  
      var controller = AnimationController(duration: Duration(milliseconds: 3000), vsync: this);
  
      animation = Tween(begin: 1.0, end: 0.0).animate(controller)..addListener(() {
  
          setState(() {
            _progress = animation.value;
          });
        });
  
      controller.forward();
  
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
  
      return Transform(
        alignment: Alignment.center,
        transform: Matrix4.rotationX(math.pi),
        child: CustomPaint(
          foregroundPainter: ProgressPainter(_progress),
        ),
      );
    }
  }
  
  
  class ProgressPainter extends CustomPainter {
  
    double _progress;
  
    ProgressPainter(this._progress);
  
    @override
    void paint(Canvas canvas, Size size) {
  
      final Paint circlePainter = Paint()..color = Colors.green;
      final Paint linePainter = Paint()..color = Colors.black..strokeWidth = 4..strokeCap = StrokeCap.round;
  
      canvas.drawCircle(Offset(0.0, 30.0 * 3), 10.0, circlePainter);
      canvas.drawCircle(Offset(15.0 * 2, 80.0 * 3), 10.0, circlePainter);
  
      canvas.drawLine(Offset(0.0 / (_progress * 10), 30.0 * 3), Offset((30.0 * 3) + (15.0)  / (_progress * 15) * 2, (80.0 * 3) / (_progress * 15)), linePainter);
    }
  
    @override
    bool shouldRepaint(CustomPainter oldDelegate) =&gt; true;
  }
  </code></pre>