Flutter Custom paint cross with path but with gradient and rounded corners

Question

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?

It seems a gradient requires createShader which takes a rect but I don't have one since I used paths.

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.

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

I also have paint1 which adds a border but it doesn't look so good since each polygon is a separate object.

@pskink Looking at this https://medium.com/flutteropen/canvas-tutorial-02-how-to-draw-round-angle-polygon-in-the-flutter-7890e933cfb1 it doesn't look like I can just make a polygon have rounded corners, it seems there's nothing built into flutter for that. I'd have to manually draw a polygon point to point and round each corner. — Hasen, Sep 07 '19 at 10:00
Comments are not for extended discussion; this conversation has been [moved to chat](https://chat.stackoverflow.com/rooms/199105/discussion-on-question-by-hasen-flutter-custom-paint-cross-with-path-but-with-gr). — Bhargav Rao, Sep 07 '19 at 10:00
@Bhargav Rao♦ I don't think anyone ever gets any notification about chat. Once it moves to chat the other person tends to disappear. — Hasen, Sep 07 '19 at 10:20
For gradient, you can use shader property of path and create shader from gradient. `final paint = Paint()..shader = gradient.createShader(bounds);` — Vinoth Vino, Aug 02 '21 at 06:58

score 0 · Answer 1 · answered Feb 03 '22 at 07:30

You can freely use Rect on the Shader to fill gradient on rounded polygon drawn on the canvas. On my approach, I used the size defined on the canvas as a base for the Rect.

Paint()
  ..style = PaintingStyle.stroke
  ..strokeCap = StrokeCap.round
  ..shader = gradient
      .createShader(Rect.fromLTWH(0.0, 0.0, size.width, size.height))
  ..strokeWidth = 20,

You can then add this paint object to the canvas that you're rendering.

As for the gradient, you can define it however you like. But here's an example.

const Gradient gradient = SweepGradient(
  startAngle: 1.25 * math.pi / 2,
  endAngle: 5.5 * math.pi / 2,
  tileMode: TileMode.repeated,
  colors: <Color>[
    Colors.blueAccent,
    Colors.lightBlueAccent,
  ],
);

Flutter Custom paint cross with path but with gradient and rounded corners

1 Answers1