Flutter - Hard color stop in linear gradient

1.2k views Asked by At

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!

3

There are 3 answers

0
Sewmina Dilshan On BEST ANSWER

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 |enter image description here enter image description here

1
TheUltimateOptimist On

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.

1
TheUltimateOptimist On

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