Back to results for “Animations”
Flutter › Custom Painters & CustomPaint

What is a CustomPainter class, and how does its paint method let you actually issue the specific drawing instructions rendered by a CustomPaint widget?

Beginner

Answer

A CustomPainter is an abstract class that you extend to define your own actual drawing logic, and its required paint method receives a Canvas object representing the drawing surface along with the available Size to draw within, letting you call various drawing methods on that canvas, such as drawLine, drawCircle, or drawPath, to actually render your desired custom graphics, with the CustomPaint widget itself responsible for calling this paint method at the appropriate time whenever the widget needs to be rendered or redrawn.
class MyCirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.blue;
    canvas.drawCircle(size.center(Offset.zero), 50, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
Real-world example A weather app implements a custom painter that draws a simple animated sun icon using basic circle and line drawing commands directly on the canvas, rather than relying on a static bundled image asset.

Common follow-ups: What is the shouldRepaint method used for, and why is it important for performance?;What other drawing methods besides drawCircle does the Canvas class provide?