Custom Painting

Draw shapes and graphics with CustomPainter

CustomPainter gives you a canvas to draw arbitrary shapes, charts, and graphics. Use it when built-in widgets are not enough.

Extend CustomPainter and implement paint() to draw on a Canvas. Use shouldRepaint to control redraws.

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 3
      ..style = PaintingStyle.stroke;

    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      50,
      paint,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter old)
    => false;
}

Canvas

style: stroke

width: 3px

25 / 35