What is wrong with this code and why the speed on the controller doesnt works? - flutter

Question

I got a problem with this code and the speed on the animation controller isnt working. When it have to pass from the previous value to the next, it makes the speeds too fast, how can I solve it? Its a radial counter that when you add a task it fills calculating the percentage of tasks completed on all the day.

class RadialProgress extends StatefulWidget {

  final porcentaje;
  final Color colorprimario;
  final Color colorsecundario;
  final double grosorsecundario;
  final double grosorprimario;

  RadialProgress({
  @required this.porcentaje, 
  this.colorprimario = Colors.blue,
  this.colorsecundario = Colors.grey,
  this.grosorsecundario = 4, 
  this.grosorprimario = 10
  });

  @override
  _RadialProgressState createState() => _RadialProgressState();
  
}
double porcentaje;
class _RadialProgressState extends State<RadialProgress> with SingleTickerProviderStateMixin{

  AnimationController controller;
  double porcentajeAnterior;

 @override
  void initState() {
    
    porcentajeAnterior = widget.porcentaje;
    controller = new AnimationController(vsync: this, duration: Duration( milliseconds: 1000 ));

    super.initState();
  }

  @override
  void dispose() { 
    controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
      controller.forward( from: 0.0 );
      final diferenciaAnimar = widget.porcentaje - porcentajeAnterior;
      porcentajeAnterior     = widget.porcentaje;

      return AnimatedBuilder(
        
        animation: controller,
        builder: (BuildContext context, Widget child) {
          return StreamBuilder<List<Todo>>(
            stream: DatabaseService().trueItems(),
            builder: (context, snapshot) {
              // List<Todo> trueitems = snapshot.data;
              if (!snapshot.hasData) return SizedBox();
              return Container(
              padding: EdgeInsets.all(10),
              width: double.infinity,
              height: double.infinity,
              child: StreamBuilder<List<Todo>>(
                stream: DatabaseService().listTodos(),
                builder: (context, snapshot) {
                  // List<Todo> listtodo = snapshot.data;
                  // final porcentaje = ((trueitems.length/listtodo.length)).toDouble();
                  return CustomPaint(
                    painter: _MiRadialProgress(
                      ( ((widget.porcentaje*100) - (diferenciaAnimar))) + (((diferenciaAnimar) * controller.value)),
                      widget.colorprimario,
                      widget.colorsecundario,
                      widget.grosorsecundario,
                      widget.grosorprimario)
                    );
                }
              ),
              // child: Text('${widget.porcentaje}'),
        );
            }
          );
        
         
        }
      );
      
  }
}

I put the _miradialprogress code if it can helps too. Thanks!

class _MiRadialProgress extends CustomPainter{

    final porcentaje;
    final colorprimario;
    final colorsecundario;
    final double grosorsecundario;
    final double grosorprimario;

  _MiRadialProgress(
    
    this.porcentaje, 
    this.colorprimario,
    this.colorsecundario,
    this.grosorsecundario, 
    this.grosorprimario
    
    );
  @override
  void paint(Canvas canvas, Size size) {


    // Completed circle
      final paint = new Paint()
      ..strokeWidth = grosorsecundario
      ..color = colorsecundario
      ..style = PaintingStyle.stroke;

      final center = new Offset(size.width * 0.5, size.height * 0.5);
      final radio = min(size.width * 0.5, size.height * 0.5);

      canvas.drawCircle(center, radio, paint);

      //arc 
      final paintArco = new Paint()
      ..strokeWidth = grosorprimario
      ..color = colorprimario
      ..style = PaintingStyle.stroke;


      //part that have to be filled
      double arcAngle = 2* pi * (porcentaje / 100);
      canvas.drawArc(
        Rect.fromCircle(center: center, radius: radio), 
        -pi / 2 , 
        arcAngle, 
        false, 
        paintArco);
    }
  
    @override
    bool shouldRepaint(covariant CustomPainter oldDelegate)=> true;

}

Answer 1

You should not put controller.forward( from: 0.0 ); inside the build method, since you will start the animation on every re-render (build method execution). It could be that your animation starts all over again while rendering, so it seems that it's not working. Just put the animation start code inside the initState method:

@override
void initState() {
  super.initState();

  porcentajeAnterior = widget.porcentaje;
  controller = new AnimationController(vsync: this, duration: Duration( milliseconds: 1000 ));
  
  controller.forward();
}