How to have several overlapping paths with filling in all of them?

I am using CustomPainter 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 :

And the results is like this :

I don't know why, but to show them i have the code like this :

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 < list.length; i++) {
      final pointList = list[i].pointList;

      path.moveTo(
        pointList[0].dx,
        pointList[0].dy,
      );

      for (int f = 1; f < 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) => false;
}