Flutter : Custom Painter draw path with different fill and stroke color

Question

I am using the CustomPainter to draw a line chart where the line(stroke) needs to be of a different color and the fill color should be a different shade of it. I could draw the chart but both with same colors. However, I need the colors to be different. How can I do this with a CustomPainter?

Also, I want to know how to have a single path painted with different colors instead of a single color if possible.

Thanks for your help!

can you post the sample code. – Sagar Acharya May 23 '20 at 18:09 — Sagar Acharya, May 23 '20 at 18:09

camillo777 · Accepted Answer · 2020-05-23T15:48:40.517

2

I personally draw the stroke with "drawLine" calls and the fill with "drawPath".

You can define 2 different paints and use paint1 with "drawLine" and paint2 with "drawPath".

edited May 23 '20 at 15:48

answered May 23 '20 at 15:30

camillo777

2,177
1
20
20

I was thinking of using the same but wondered if there is a better way I don't know of. Also, How can I add gradient color to the drawn path? I'm looking for a simpler solution for the shader asks for a Rect object. – Akash Gorai May 23 '20 at 16:27
@AkashGorai to make a Gradient you can create Paint like this: final paint = Paint() ..shader = RadialGradient( colors: [ color1, color2, ], ).createShader(Rect.fromCircle( center: offset, radius: radius, )); – camillo777 May 23 '20 at 16:36
@AkashGorai I do not think there is a way; if you only need a Rect, I think that if you draw 2 rectangles overlapped, one with stroke paint and another with fill paint, you should get it because the fill draws only internally excluding the border. – camillo777 May 23 '20 at 16:40
I'll try and get back. Thank you for responding :) – Akash Gorai May 23 '20 at 17:19
I tried and.. i think I facing trouble with the fill color. I'm using canvas.drawPath() but when style is fill, my chart is filling for the last three coordinates lol. Can you help? – Akash Gorai May 23 '20 at 18:11
@AkashGorai I think the problem is that the stroked one must not be over the closed path. You must draw the edge before calling yourPath.close(). – kakyo Jul 30 '20 at 08:16
@AkashGorai And you must use a different `Paint` object. – kakyo Jul 30 '20 at 08:23

score 0 · Answer 2 · answered Apr 06 '23 at 11:09

You have to use 2 times drawPath to set color to stroke and fill

    final Paint paint = Paint()
      ..style = PaintingStyle.stroke
      ..color = const Color(0xff0056eb)
      ..strokeWidth = 1.0;

    touchCanvas.drawPath(
      paths[index]
          .transform(matrix4.storage)
          .shift(Offset(offsetX, offsetY)),
      paint,
      onTapDown: (details) {
        onPressed(paths[index], stringPaths[index]);
      },
    );

    final Paint paint2 = Paint()
      ..style = PaintingStyle.fill
      ..color =  Color(0xff0056eb).withOpacity(0.05)
      ..strokeWidth = 1.0;
    touchCanvas.drawPath(
      paths[index]
          .transform(matrix4.storage)
          .shift(Offset(offsetX, offsetY)),
      paint2,
      onTapDown: (details) {
        onPressed(paths[index], stringPaths[index]);
      },
    );

Flutter : Custom Painter draw path with different fill and stroke color

2 Answers2