0PricingLogin▼
Flutter Mobile Development · Lesson

The Canvas API: Paths, Paints, and Shaders

Draw shapes, gradients, and strokes using Canvas primitives and the Paint configuration.

Meet the Canvas

When you build a CustomPainter, Flutter hands you two things in paint(): a Canvas and a Size.

  • Canvas is your drawing surface. It exposes primitives like drawRect, drawCircle, drawPath, and drawLine.
  • Size tells you how big the area is, so you can scale your drawing to fit any device.

Every draw call needs a Paint object that describes how to draw: color, stroke vs fill, width, and more.

void paint(Canvas canvas, Size size) {
  final paint = Paint()..color = const Color(0xFF2196F3);
  canvas.drawRect(
    Rect.fromLTWH(0, 0, size.width, size.height),
    paint,
  );
}

The Paint Object

A Paint is a bundle of styling options. The most important fields are:

  • color — the color used to draw.
  • style — PaintingStyle.fill (solid interior) or PaintingStyle.stroke (outline only).
  • strokeWidth — line thickness when stroking.
  • isAntiAlias — smooth edges, on by default.

Flutter idiom uses the cascade operator .. to configure a freshly created Paint in one expression.

final fill = Paint()
  ..color = const Color(0xFFE91E63)
  ..style = PaintingStyle.fill;

final outline = Paint()
  ..color = const Color(0xFF000000)
  ..style = PaintingStyle.stroke
  ..strokeWidth = 4.0;

All lessons in this course

  1. The Canvas API: Paths, Paints, and Shaders
  2. Building an Interactive Custom Chart Widget
  3. Clipping, Blend Modes, and Layer Compositing
  4. Hit Testing and Repaint Optimization
← Back to Flutter Mobile Development