title: Flutter how to stop custom painter progress indicator
body: <p>I have created something like progress indicator by following some tutorial in youtube.</p>
  <p>This is the code</p>
  <pre><code>final Gradient gradient = new LinearGradient(
    colors: &lt;Color&gt;[
      Colors.greenAccent.withOpacity(1.0),
      Colors.yellowAccent.withOpacity(1.0),
      Colors.redAccent.withOpacity(1.0),
    ],
    stops: [
      0.0,
      0.5,
      1.0,
    ],
  );
  
  class Circular_arc extends StatefulWidget {
    const Circular_arc({
      Key key,
    }) : super(key: key);
  
    @override
    _Circular_arcState createState() =&gt; _Circular_arcState();
  }
  
  class _Circular_arcState extends State&lt;Circular_arc&gt; with SingleTickerProviderStateMixin {
  
  
    Animation&lt;double&gt; animation;
    AnimationController animController;
  
    @override
    void initState() {
      // TODO: implement initState
      super.initState();
  
      animController = AnimationController(duration:Duration(seconds: 3),vsync: this);
  
      final curvedAnimation  = CurvedAnimation(parent: animController,curve: Curves.easeInOutCubic);
  
      animation = Tween&lt;double&gt;(begin: 0.0,end: 3.14).animate(curvedAnimation)..addListener(() {
        setState(() {
  
        });
      });
      animController.repeat(reverse: true);
    }
  
    @override
    Widget build(BuildContext context) {
      return Container(
        child: Stack(
          children: [
            CustomPaint(
              size: Size(300,300),
              painter: ProgressArc(null, Colors.black54, true),
            ),
            CustomPaint(
              size: Size(300,300),
              painter: ProgressArc(animation.value, Colors.redAccent, false),
            ),
            Positioned(
                top:120,
                left:130,
                child:Text(&quot;${(animation.value/3.14 * 100).round()}%&quot;,style:TextStyle(color:Colors.red,fontSize:30))
            )
          ],
  
        ),
      );
    }
  }
  
  class ProgressArc extends CustomPainter{
  
    bool isBackground;
    double arc;
    Color progressColor;
  
    ProgressArc(this.arc,this.progressColor,this.isBackground);
  
    @override
    void paint(Canvas canvas, Size size) {
      final rect = Rect.fromLTRB(0,0, 300, 300);
      final startAngle = -math.pi;
      final sweepAngle = arc != null ? arc : math.pi;
      final userCenter  = false;
      final paint = Paint()
        ..strokeCap = StrokeCap.round
        ..color = progressColor
        ..style = PaintingStyle.stroke
        ..strokeWidth = 20;
  
      if(!isBackground){
        paint.shader = gradient.createShader(rect);
      }
      canvas.drawArc(rect, startAngle, sweepAngle, userCenter, paint);
    }
  
    @override
    bool shouldRepaint(covariant CustomPainter oldDelegate) {
      // TODO: implement shouldRepaint
      return true;
    }
  }
  </code></pre>
  <p>It look like this</p>
  <p><a href="https://i.stack.imgur.com/SDoAQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SDoAQ.png" alt="enter image description here" /></a></p>
  <p>The issue in this is it's not stopping means the gradient in the progress bar moving continuously like its goes 0 to 100% and then it restarts again I need to stop this.</p>
  <p>I am trying it from a day but don't know what can i do in this</p>