Add color gradient support to polygon in google_maps_flutter

[abhijithvijayan]

Use case

Gradient Support?

I was thinking of this between 3 points A, B & C

From A(Red) to B(green) to C(blue)

Proposal

If the polygon function could take colors as prop, it would be better isn't it?

Like the support in react-native-maps/react-native-maps#1911 ?

[abhijithvijayan]

I have to revert back to using React-Native as my app primarily depend on this feature and has to be in production soon.

Will this feature implemented anytime soon?

Another package called flutter_maps implements this feature as requested in fleaflet/flutter_map#452 .

Is there some way to implement that PR to this package as well?

@iapicca @timsneath

[fvisticot]

Any news on this important feature ? Any app using map to display sport or driving data need this feature. I really would like to use google_maps_flutter instead of moving to flutter_map

[sc-ot]

Any updates on this? I couldn't find any working example. It would be really nice if someone can link me some example projects or code snippets.

[renanborgez]

@sc-ot for a temporary solution check what I've done:

I approached this problem by drawing various small elements with differents colors based on the position of each.
Then I used a dart library to generate the gradient colors for me and I applied those colors to each shape.

The drawback of this approach is that I'm creating quite a lot of elements in the map and the initial rendering is slow, but in this way I can have the end result as I wanted as this is not yet supported in google maps library.

(you can increase the performance by reducing the amount of elements to render the fake gradient, then your gradient will automatically have a lower "resolution")

Bellow you can check the result of this in my application:

[AliEasy]

@renanborgez could you share the code?

[renanborgez]

@AliEasy

I am basically making use of the polygons feature, I am calculating the polygon based on the shape that I want. I can not just place my plain code here due some privacy restrictions that I have, however I can show you the approach until the part where you have to draw your own polygons.

// I am generating a list of colors based on the amount of polygons that I want to draw
// 'Softer' you want your gradient, more colors you have to generate
// I am using the following library to generate all colors for me
// https://pub.dev/packages/kandinsky
List<Color> getPalette(int colorsInBetween) {

  var colors = multiGradient(colorsInBetween, [
    getRGBArrayFromColor(Colors.blue[100]),
    getRGBArrayFromColor(Colors.blue[900]),
  ]);
  
  // You have to return a list of Material Colors as it is used by Google Maps library
  return colors.map((List<num> color) => 
      Color.fromRGBO( color[0].round(), color[1].round(), color[2].round(), 1)
  ).toList();
}

var polygons = <Polygon>[];
var colors = getPalette();

// Then you have to create a loop for your polygons
polygons.add(Polygon(
  fillColor: colors[i]
  visible: true,
  strokeWidth: 0,
  points: [...previousPoints, ...nextPoints], // The magic goes here, you have to draw your polygon next to the previous polygon
))

// If I'm not mistaken, points is a list of `LatLng`s

// And finally you pass your polygons to google maps
GoogleMap(polygons: polygons)

If you draw rectangles you should have something like this:

Remember that each color is a separate polygon, this is why I mentioned above that softer you want your gradient more polygons you will have to create and as consequence your component might get slower to be loaded (but that wasn't an issue for me with that level of color granularity)

I used the following lib to generate my gradient
https://pub.dev/packages/kandinsky

[SriRam-Macha]

Any updates on this feature?

[1cedsoda]

It has been nearly 3 years... Can't be that hard

[ElMehdijebbour]

It is really an important feature why is it taking too long?

[renanzdm]

Did anyone get over this? I'm using the above approach but the map is extremely heavy

[mahirozdin]

any updates?

[phobosbag]

will there be an update?