Flutter › Custom Painters & CustomPaint

What performance considerations become important when using CustomPaint for a complex, frequently redrawn custom drawing, such as a real time data visualization updating many times per second?

Advanced

Answer

A complex custom drawing that needs to redraw itself very frequently, such many times per second to reflect real time incoming data, requires careful attention to performance, including minimizing the actual computational work performed within the paint method itself since it may run on every single animation frame, avoiding creating brand new Paint or Path objects on every single call to paint when they could instead be created once and simply reused, and being especially precise and efficient about the shouldRepaint logic to guarantee a redraw is genuinely triggered only when the underlying data has actually meaningfully changed, since a poorly optimized paint method running many times per second can noticeably impact an app's overall frame rate and responsiveness.
class LivePainter extends CustomPainter {
  final Paint _cachedPaint = Paint()..color = Colors.blue;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawCircle(Offset.zero, 10, _cachedPaint);
  }
}
Real-world example A stock trading app reuses a single cached Paint object across every single frame of its rapidly updating real time price chart rather than creating a brand new one on every single call to paint, meaningfully improving the chart's overall frame rate during periods of very frequent price updates.

Common follow-ups: How do you actually measure and profile the performance of a specific CustomPainter using Flutter DevTools?;What is repaint boundary, and how can it help isolate expensive custom painting from the rest of the widget tree?