0PricingLogin▼
Flutter Mobile Development · Lesson

Clipping, Blend Modes, and Layer Compositing

Use clip paths and blend modes to compose advanced layered visual effects.

Why Compositing Matters

Advanced visuals in Flutter rarely come from a single shape. Glow rings, frosted overlays, masked thumbnails, and "cut-out" badges are built by layering several draws and controlling how each new layer combines with what's already on the canvas.

Three tools drive this on a Canvas:

  • Clipping — restrict where drawing can land (clipPath, clipRect, clipRRect).
  • Blend modes — control the math that merges a new layer with the pixels beneath it (BlendMode on a Paint).
  • Layers — saveLayer creates an offscreen buffer so a blend mode applies to a whole group, not just one shape.

This lesson wires all three together.

Clipping the Canvas

Inside a CustomPainter.paint, a clip narrows the drawable region. Everything you draw after the clip is masked to that region until the next restore().

  • canvas.clipRect(rect) — rectangular clip.
  • canvas.clipRRect(rrect) — rounded-rectangle clip (great for card thumbnails).
  • canvas.clipPath(path) — arbitrary shape clip.

Always pair clipping with save() / restore() so the clip doesn't leak into later draws.

class ClipPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = const Color(0xFF2196F3);
    canvas.save();
    final rrect = RRect.fromRectAndRadius(
      Offset.zero & size,
      const Radius.circular(24),
    );
    canvas.clipRRect(rrect);
    // Fills the whole canvas, but only the rounded area shows.
    canvas.drawRect(Offset.zero & size, paint);
    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant ClipPainter oldDelegate) => false;
}

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