Complex polylines and gradient issue

[GaelleJoubert]

Hello there,
I'm drawing "complex" polylines with gradient, and stumble into a weird behavior !

By complex, I mean not a straight line at all, many points which can come back to the same area for exemple.

To be able to see the "begining" and "end" of the path, I am using a gradient of tree colors.
The idea is that the begining of the poyline is in one color, and slowly moove to another color the closer we are to the end.

It's seems to work rather well for "simple" path, where the path don't go back near the begining. But for complex path, it looks like there is a "leaking" effect.

Here are some screenshots to explain more clearly what I'm getting :

Picture 1 : A rather "simple path" that looks like what I wanted to acheive

Picture 2 : A "complex" path, (which comes back near some of the begining points) with the "leaking effect" observed

Picture 3 : Another "complex" path with a different "leaking effect" observed

Is this a bug, Or am I misunderstanding the way gradient works ?
I just want to draw a line which as a begining in one color and the end in another.
Can you help me ?

Here is the line of code I'm using to build the polyline :

Polyline(points:_listPoint , strokeWidth: 3, gradientColors: [ colorGradient1,colorGradient5,colorGradient9, ], )

Thank you very much !

[ibrierley]

I think this would be expected behaviour.

[GaelleJoubert]

Mhhh ok.
Would you have any idea how to draw a complex polyline with a gradient like that :
First points on the list are color 1 TO last points on the list are color 2 ?
I don't want the gradient to be related to the GPS position of the points, but just their order in the list I provide.

I don't know if I'm being clear, but basically something that behave like my "Picture 1", even when the path looks like picture 2 or 3.

[GaelleJoubert]

please ?

[bmason8]

My only suggestion/guess would be to not use colors with opacity if you are. They'll mix when overlapping (or apparently even when close like in your image).

[ibrierley]

I'm going to close this, as I'm not sure of a way this can be done. But feel free to open if still a problem.

[Naografix]

Currently have the same issue here.
Do you have any solution to fix this?

[JaffaKetchup]

I'm not currently aware of a way to do this in Flutter. A quick Google search doesn't show anything. The reason this happens is because we essentially apply the gradient to the bounding box, not the line.