title: How to have several overlapping paths with filling in all of them?
body: <p>I am using <code>CustomPainter</code> to display some figures, however there are some that go on top of others, the problem I have is that I want them to be displayed like this :</p>
  <p><a href="https://i.stack.imgur.com/7cjaT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7cjaT.png" alt="enter image description here" /></a></p>
  <p>And the results is like this :</p>
  <p><a href="https://i.stack.imgur.com/jg2Dc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jg2Dc.png" alt="enter image description here" /></a></p>
  <p>I don't know why, but to show them i have the code like this :</p>
  <pre><code>class _ZonePaint extends CustomPainter {
    _ZonePaint({
      [...]
    });
  
      [...]
  
    @override
    void paint(Canvas canvas, Size size) {
  
      /// defines the look of the strokes
      final _pencilPaint = Paint()
        ..strokeCap = StrokeCap.round
        ..color = secondaryMaterialColor.withOpacity(0.2)
        ..strokeWidth = 2.0
        ..style = PaintingStyle.stroke;
  
      /// defines the look of the filling
      Paint _fillPaint = Paint()
        ..color = secondaryMaterialColor.withOpacity(0.2)
        ..style = PaintingStyle.fill;
  
      final Path path = Path();
  
      for (int i = 0; i &lt; list.length; i++) {
        final pointList = list[i].pointList;
  
        path.moveTo(
          pointList[0].dx,
          pointList[0].dy,
        );
  
        for (int f = 1; f &lt; pointList.length; f++) {
          path.lineTo(pointList[f].dx, pointList[f].dy);
        }
  
        path.close();
      }
  
      /// draw the zone
      canvas.drawPath(path, _pencilPaint);
      canvas.drawPath(path, _fillPaint);
    }
  
    @override
    bool shouldRepaint(_ZonePaint oldDelegate) =&gt; false;
  }
  </code></pre>