0Pricing
Flutter Mobile Development · Leçon

Découpage, modes de fusion et composition des calques

Utilisez des chemins de découpage et des modes de fusion pour composer des effets visuels avancés en plusieurs calques.

Découpage, modes de fusion et composition des calques est une leçon Flutter Mobile Development gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Flutter Mobile Development, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Flutter Mobile Development comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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;
}

Clipping with an Arbitrary Path

For non-rectangular masks (tickets, waves, badges), build a Path and pass it to clipPath. The classic ticket shape uses two concave arcs on its sides.

Set doAntiAlias: true (the default) for smooth edges. For animated clips that change every frame, doAntiAlias: false can be a touch faster.

Path ticketPath(Size size, double notch) {
  final r = notch;
  return Path()
    ..moveTo(0, 0)
    ..lineTo(size.width, 0)
    ..lineTo(size.width, size.height / 2 - r)
    ..arcToPoint(
      Offset(size.width, size.height / 2 + r),
      radius: Radius.circular(r),
      clockwise: false,
    )
    ..lineTo(size.width, size.height)
    ..lineTo(0, size.height)
    ..lineTo(0, size.height / 2 + r)
    ..arcToPoint(
      Offset(0, size.height / 2 - r),
      radius: Radius.circular(r),
      clockwise: false,
    )
    ..close();
}

What a Blend Mode Actually Does

A BlendMode defines the formula combining the source (what you're drawing now) with the destination (pixels already there). The default is BlendMode.srcOver — normal alpha compositing.

Useful families:

  • Porter-Duff (geometry/masking): srcIn, dstIn, srcOut, dstATop, clear.
  • Separable color math: multiply, screen, overlay, plus (additive glow), difference.

You assign it on the Paint: paint.blendMode = BlendMode.multiply.

Blend Modes Need a Layer

Here's the key gotcha: many blend modes (srcIn, dstIn, multiply over transparency, etc.) only behave correctly when there is an explicit layer to act as the destination.

canvas.saveLayer(bounds, paint) allocates an offscreen buffer. Draws between saveLayer and restore accumulate in that buffer; on restore the buffer is composited back using the layer paint's blend mode.

Without saveLayer, a srcIn draw would treat the entire screen as destination — usually erasing more than you intended.

void paint(Canvas canvas, Size size) {
  final bounds = Offset.zero & size;
  // 1. Open an offscreen layer.
  canvas.saveLayer(bounds, Paint());
  // 2. Destination: a circle.
  canvas.drawCircle(
    size.center(Offset.zero),
    size.shortestSide / 2,
    Paint()..color = const Color(0xFFFFFFFF),
  );
  // 3. Source with srcIn keeps only the overlap with the circle.
  canvas.drawRect(
    bounds,
    Paint()
      ..shader = const LinearGradient(
        colors: [Color(0xFFFF0080), Color(0xFF7928CA)],
      ).createShader(bounds)
      ..blendMode = BlendMode.srcIn,
  );
  // 4. Composite the layer back to the canvas.
  canvas.restore();
}

Masking a Gradient into a Shape

The pattern from the previous scene is the idiom for gradient-filled icons or text masks:

  • Draw the opaque mask shape first (it becomes the destination).
  • Draw the gradient with BlendMode.srcIn — it survives only where the mask is opaque.

Reverse the roles with dstIn: draw the gradient first, then a shape with dstIn to keep only the gradient under that shape. Choose based on which layer you want to draw last.

class GradientTextMask extends CustomPainter {
  GradientTextMask(this.label);
  final String label;

  @override
  void paint(Canvas canvas, Size size) {
    final bounds = Offset.zero & size;
    canvas.saveLayer(bounds, Paint());
    final tp = TextPainter(
      text: TextSpan(
        text: label,
        style: const TextStyle(
          fontSize: 64, fontWeight: FontWeight.bold,
          color: Color(0xFFFFFFFF),
        ),
      ),
      textDirection: TextDirection.ltr,
    )..layout();
    tp.paint(canvas, Offset.zero); // destination = glyphs
    canvas.drawRect(
      bounds,
      Paint()
        ..shader = const LinearGradient(
          colors: [Color(0xFF00C6FF), Color(0xFF0072FF)],
        ).createShader(bounds)
        ..blendMode = BlendMode.srcIn, // gradient fills glyphs
    );
    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant GradientTextMask old) => old.label != label;
}

Additive Glow with BlendMode.plus

BlendMode.plus adds source and destination color channels (clamped to 1.0). Overlapping bright shapes get brighter — perfect for neon glows, sparks, and light bloom.

Combine it with a MaskFilter.blur to soften each shape into a halo. Because plus accumulates, layering several blurred circles produces a convincing glow without any image asset.

void drawGlow(Canvas canvas, Offset c, double r, Color color) {
  final glow = Paint()
    ..color = color
    ..blendMode = BlendMode.plus
    ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 12);
  canvas.drawCircle(c, r, glow);
  // A second, tighter core makes the center read brighter.
  canvas.drawCircle(c, r * 0.5,
    Paint()..color = color..blendMode = BlendMode.plus);
}

Punching Holes with BlendMode.clear

To cut a transparent hole through an already-drawn layer, draw a shape with BlendMode.clear. It erases destination pixels (sets alpha to 0) wherever the source covers.

This must happen inside a saveLayer — otherwise clear would punch through everything behind the canvas, including widgets below. The spotlight/overlay-with-cutout effect is the canonical use.

void paint(Canvas canvas, Size size) {
  final bounds = Offset.zero & size;
  canvas.saveLayer(bounds, Paint());
  // Dim scrim covering everything.
  canvas.drawRect(bounds, Paint()..color = const Color(0xCC000000));
  // Cut a clear circular "spotlight" through the scrim.
  canvas.drawCircle(
    size.center(Offset.zero),
    size.shortestSide / 4,
    Paint()..blendMode = BlendMode.clear,
  );
  canvas.restore();
}

Layer Paint vs Per-Shape Paint

There are two distinct paints in play, and mixing them up is a common bug:

  • The per-shape paint (passed to drawCircle, drawRect…) controls how that one shape blends with the current layer's contents.
  • The layer paint (passed to saveLayer) controls how the entire finished layer blends back when you restore(), and can apply a group opacity or colorFilter.

Want one slider to fade a whole composite group uniformly? Put the opacity on the layer paint, not on each shape — per-shape opacity would let overlaps show through each other.

void paint(Canvas canvas, Size size) {
  final bounds = Offset.zero & size;
  // Group opacity: whole layer fades together.
  final layerPaint = Paint()..color = const Color(0x80FFFFFF);
  canvas.saveLayer(bounds, layerPaint);
  final p = Paint()..color = const Color(0xFFE91E63);
  canvas.drawCircle(const Offset(60, 60), 50, p);
  canvas.drawCircle(const Offset(100, 60), 50, p); // overlap stays solid
  canvas.restore(); // entire pair composited at 50% alpha
}

Clip + Blend + Layer Together

A frosted, rounded thumbnail with a gradient sheen combines all three tools in order:

  • Clip to a rounded rect so nothing spills past the card.
  • saveLayer so the sheen can blend against the photo as a group.
  • Draw the photo, then a soft highlight with BlendMode.softLight or overlay.

Order is everything: clip first, open the layer, draw destination, draw blended source, restore, then restore the clip.

void paint(Canvas canvas, Size size, ui.Image photo) {
  final bounds = Offset.zero & size;
  canvas.save();
  canvas.clipRRect(
    RRect.fromRectAndRadius(bounds, const Radius.circular(20)),
  );
  canvas.saveLayer(bounds, Paint());
  canvas.drawImageRect(
    photo,
    Offset.zero & Size(photo.width.toDouble(), photo.height.toDouble()),
    bounds,
    Paint(),
  );
  canvas.drawRect(
    bounds,
    Paint()
      ..shader = const LinearGradient(
        begin: Alignment.topLeft, end: Alignment.bottomRight,
        colors: [Color(0x88FFFFFF), Color(0x11000000)],
      ).createShader(bounds)
      ..blendMode = BlendMode.softLight,
  );
  canvas.restore(); // close layer
  canvas.restore(); // close clip
}

Performance: Layers Aren't Free

Each saveLayer allocates an offscreen texture and forces an extra compositing pass — the single most expensive thing you can do per frame in a painter. Treat it as a tool to reach for deliberately, not a default.

  • Pass the tightest possible bounds to saveLayer; a full-screen layer is far costlier than a small one.
  • Prefer a plain clipRRect + direct draws when you don't actually need group blending.
  • Cache static composites (e.g. via ui.PictureRecorder into a ui.Image) instead of rebuilding the layer every frame.
  • Reuse Paint objects; avoid allocating in the hot paint path.

Quick Check: Choosing the Right Tool

You want to fill some bold text glyphs with a linear gradient inside a CustomPainter, and nothing outside the glyphs should be tinted. Which approach is correct?

Recap

You can now compose advanced layered effects on a Canvas:

  • Clipping (clipRect/clipRRect/clipPath) restricts where draws land — always wrap in save()/restore().
  • Blend modes set how a source merges with the destination: srcIn/dstIn for masking, plus for additive glow, clear for cut-out holes, softLight/overlay for sheen.
  • saveLayer gives blend modes a real destination buffer and lets you apply group opacity or color filters via the layer paint.
  • Distinguish the layer paint from per-shape paint, draw destination-before-source, and keep layers small and rare for performance.

Reach for layers deliberately, clip when you only need a mask, and cache static composites.

Questions Fréquemment Posées

La leçon « Découpage, modes de fusion et composition des calques » est-elle gratuite ?

Oui — le texte complet de « Découpage, modes de fusion et composition des calques » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Flutter Mobile Development, passe à CoddyKit PRO. Le cours Flutter Mobile Development comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Découpage, modes de fusion et composition des calques » ?

Utilisez des chemins de découpage et des modes de fusion pour composer des effets visuels avancés en plusieurs calques. Tu pratiques Flutter Mobile Development avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Flutter Mobile Development ?

Aucune expérience préalable n'est requise. Flutter Mobile Development sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Découpage, modes de fusion et composition des calques » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Flutter Mobile Development ?

Oui. Chaque leçon Flutter Mobile Development inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. L’API Canvas : chemins, peintures et nuanceurs
  2. Créer un composant graphique interactif personnalisé
  3. Découpage, modes de fusion et composition des calques
  4. Test de collision et optimisation du repeint
← Retour à Flutter Mobile Development