Flutter - Hard color stop in linear gradient

Question

I'm using CustomPaint to make a custom shape and I want to apply a color gradient but with hard color stops. Without color transitions.
PS:I cannot use different Paints instead of gradient because of the custom shape.

I checked the documentation and couldn't find anything. Is it impossible? Or is there any other workarounds? Thanks!

score 1 · Answer 1 · answered Mar 23 '22 at 01:18

1

You could split your custom shape in smaller shapes and give each one its correct color. That would be one way to do it.

answered Mar 23 '22 at 01:18

TheUltimateOptimist

1,089
4
19

This is a completely a valid point but in my case the shape is hard to break into pieces. – Sewmina Dilshan Mar 23 '22 at 16:06

score 1 · Answer 2 · edited Mar 23 '22 at 23:03

I have another idea. You could do it like so: Give the complete canvas of you custom paint a color, the color of your application's background. Give your custom shape Colors.transparent as its color. Then you make as many containers with the colors you want to have and put them below each other so that there overall size matches the size of your custom paint. You stack the custom paint onto these containers using Stack Widget and your custom shape will take the colors of these containers because its color is transparent. While the surrounding of your custom shape will have the color of the background of your application, because the whole custom paint is colored that way.

Wow. This must exactly fix my issue. Great out of the box thinking. I will test this out and see. — Sewmina Dilshan, Mar 24 '22 at 22:21

score 1 · Accepted Answer · answered Mar 25 '22 at 14:16

Okay I figured it out myself, I use Gradient.linear as the shader for custom paint. I noticed that it only blends colors when there is a big gap in stops. So I put my colors and stops like this.

Colors | Stop

Green 0.2
Green 0.201
Blue 0.5
Blue 0.501
Yellow 1

Now the color stops are hard.

Here's a preview of before and after |

Flutter - Hard color stop in linear gradient

3 Answers3