title: Flutter Custom paint cross with path but with gradient and rounded corners
body: <p>I've just started getting to grips with Custom painter and I've created a basic cross but not sure how to make the corners rounded and make the colour a gradient?</p>
  
  <p>It seems a gradient requires <code>createShader</code> which takes a <code>rect</code> but I don't have one since I used paths.</p>
  
  <p>Also I'd like to round the corners of the cross a little but not sure how that is done. I thought about creating rectangles but it doesn't seem to be possible to create slanted rectangles either.</p>
  
  <pre><code>class CrossPainter extends CustomPainter {
    CrossPainter({this.bodyColour, this.strokeColour, this.stroke});
    final Color bodyColour;
    final Color strokeColour;
    final double stroke;
    @override
    void paint(Canvas canvas, Size size) {
      Paint paint = Paint();
      paint
        ..color = strokeColour
        ..style = PaintingStyle.stroke
        ..strokeCap = StrokeCap.round
        ..strokeWidth = stroke;
  
      Paint paint1 = Paint();
      paint1
        ..color = bodyColour
        ..style = PaintingStyle.fill
        ..strokeWidth = 0;
  
      double width = size.width;
      double height = size.height;
  
      Path path = Path();
      path.addPolygon([Offset.zero, Offset(width / 4, 0), Offset(width, height), Offset(width - (width / 4), height)], true);
      Path path2 = Path();
      path2.addPolygon(
          [Offset(width, 0), Offset(width - (width / 4), 0), Offset(0, height), Offset(0 + (width / 4), height)], true);
  
      canvas.drawPath(path, paint1);
      canvas.drawPath(path2, paint1);
      // canvas.drawPath(path, paint); //border
      // canvas.drawPath(path2, paint); //border
    }
  
    @override
    bool shouldRepaint(CustomPainter oldDelegate) {
      return true;
    }
  }
  </code></pre>
  
  <p>I also have <code>paint1</code> which adds a border but it doesn't look so good since each polygon is a separate object.</p>