CODEWITHSUNDEEP
flutterflutter-animation
Ashwin Kmr
Ashwin Kmr

Reputation: 300

Animation is slow in flutter

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

Upvotes: 4

Views: 3832

Answers (2)

Simonov Dmitriy
Simonov Dmitriy

Reputation: 147

The problem is Paint()

Using Paint to create can be resource-intensive for a few reasons:

1. Pixel-level rendering: When you use Paint, Flutter has to manage rendering at the pixel level.

2. Double drawing: Using Paint effectively requires drawing twice: once for the stroke and once for the fill. This increases the number of rendering operations and therefore the load on the CPU.

3. Complex operations: Paint can involve complex mathematical operations for precise alignment and feathering, especially when the stroke is wider and requires more precise drawing of each character.

4. Caching issues: Widgets that use Paint can be more difficult to cache, as each frame may require a new draw, especially if the text changes or animates.

5. Hardware limitations: On weaker devices with less graphics capabilities, using Paint for complex rendering can slow down the performance of the entire system.

Upvotes: 0

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29438

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

Upvotes: 4

Related Questions