Animation is slow in flutter

Question

I am animating line in canvas in flutter.i am using AnimationController to control the animation. When i animate a single line, it is get animated without any lag or performance issue.But when i animate more than 10 lines it gets struck and lagging when rendering the line.In each frame redraw is getting called in order to animate the line .How to overcome this issue.

Code Snippet

class CrossPainter extends CustomPainter {
  Paint _paint;
  double _fraction;
  CrossPainter(this._fraction) {
    _paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 10.0
      ..strokeCap = StrokeCap.round;
  }

  @override
  void paint(Canvas canvas, Size size) {
    canvas.clipRect(Rect.fromLTRB(0, 0, _fraction * size.width , size.height));
    canvas.drawLine(Offset(0.0, 0.0), Offset(size.width , size.height ), _paint);
     canvas.drawLine(Offset(size.width, 0.0), Offset(size.width - size.width, size.height ), _paint);
  }

  @override
  bool shouldRepaint(CrossPainter oldDelegate) {
    return oldDelegate._fraction != _fraction;
  }
}

typedef FadeBuilder = Widget Function(BuildContext, double);
class _AnimationWrapper extends StatefulWidget {
  const _AnimationWrapper({this.builder});
  final FadeBuilder builder;

  @override
  _AnimationWrapperState createState() => _AnimationWrapperState();
}

class _AnimationWrapperState extends State<_AnimationWrapper> with SingleTickerProviderStateMixin {
  double opacity = 0.0;
  double _fraction = 0.0;
  Animation<double> animation;
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(duration: Duration(milliseconds: 3000), vsync: this);
    animation = Tween(begin: 0.0, end: 1.0).animate(controller)
      ..addListener(() {
        setState(() {
          _fraction = animation.value;
        });
      }
      );
    controller.forward();
  }
  @override void didUpdateWidget(_AnimationWrapper oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
  }
  @override
  Widget build(BuildContext context) {
   return CustomPaint(painter: CrossPainter(_fraction));
  }
}

Thanks

Ashwin

Answer 1

If I understand your problem correct - these lags caused by debug mode. There are always small problems with animation in debug. Try to build release apk and launch it