polyline with gradient

[SebWojd]

Add possibility to create polyline with gradient color.

closes #486

[johnpryan]

need to also handle the isEmpty case

[filipevl]

@SebWojd Does this pr support using a gradient of only two colors over the whole line, instead of defining a color for every point? What does stop colors do? It is undocumented and not used in the example.

[SebWojd]

@FilipeLarga This feature support as many colors as you wish. You have to play with gradientColors and colorsStop. I implemented here the standard way how Dart use linear gradient.

Here you have a snippet:

PolylineLayerOptions(
                    polylines: [
                      Polyline(
                        points: pointsGradient,
                        strokeWidth: 4.0,
                        gradientColors: [
                          Color(0xffE40203),
                          Color(0xffFEED00),
                          Color(0xff007E2D),
                          Color(0xff0000FF),
                        ],
                        colorsStop: [
                          0.1,
                          0.3,
                          0.5,
                          0.95,
                        ],
                      ),
                    ],
                  ),

and the result is:

[moovida]

Hi @SebWojd , sorry for resurrecting this here. I have an issue I am describing on issue #772
Is it possible that this works properly only for straight lines? Or is it supposed to work also for complex polylines?

[Vincent7140]

Hi @moovida , sorry for resurrecting this here. I have the same issue you had describing on issue #772

Did you manage to correct the issue since then ? thank you

[PooruTorie]

Hi, i have the same error like in #772
In a line with more than 5 points

[Jamesm-98]

I'm also facing a similar issue here - suffering from the gradient being referenced to a straight line from first to last points. This makes colouring polylines by arbitrary variable difficult/innacurate when the polyline is not a straight line (or close to one). If the polyline curves back towards the first point it's colour goes "backwards" up the colour gradient.

[Vincent7140]

Hi, I've done this a while ago and I have never coded in dart again but looking into my code it seems I had replace this :

gradientColors: _generateGradientColors(colors),

by this :

  List<Color> gradient = _generateGradientColors(colors);
  List<dynamic> result = _generateColorStops(gradient);
  List<Color> newColors = result[0];
  List<double> colorStops = result[1];

and then this :

return Polyline(
points: points,
strokeWidth: 6,
gradientColors: _generateGradientColors(colors),
);
}).toList();

by this

return Polyline(
points: points,
strokeWidth: 6,
gradientColors: newColors,
colorsStop : colorStops,
);
}).toList();

Maybe it will help good luck !

[JaffaKetchup]

From what I can tell, only workarounds of splitting up the line into smaller lines will work. Maybe a shader could work but I don't think so with the basic shader support Flutter has (it would need flutter_gpu).

I've looked into this quite a bit, and actually it doesn't seem to be implemented in many places except in editing software. Even on the web it's not possible. See for example https://github.com/cereallarceny/gradient-path.