I am using the google_maps_flutter: ^2.1.3 package in my Flutter project that I am currently developing and I want to show active regions on the map in the application. I tried to show the active regions on the map using polygons, but I couldn't paint the part outside of these regions a different color. Actually, exactly what I want on the map, everywhere will be gray (to be clear that it is not active), but some areas will be white (to be clear that it is active) surrounded by borders. You can understand exactly what I want by looking at the image below. In this way, there will be more than one active region on the map.
Note: As I mentioned before, I can get this image using polygons, but I cannot make the outside of the polygons gray.
Based on Matt's answer, I came up with the exact solution. First, I couldn't draw a polygon that would cover the entire world, and instead I increased the polygon count to 2. I drew 2 polygons covering the whole world, from 0 to east and from 0 to west. I set the strokeWidth values to 0 so that these polygons do not draw lines from the north pole to the south pole. Later, I showed the active areas in holes, but because my strokeWidth value was 0, the border line did not occur. To avoid this event, I created a new polygon with the fillColor value Colors.transparent and the same coordinates, and set the strokeWidth value to 2.
My sample codes are as follows:
polygon.add(
Polygon(
fillColor: Colors.black.withOpacity(0.5),
polygonId: const PolygonId('test'),
holes: [if (pointsFromService.length != 0) pointsFromService],
points: const [
LatLng(-89, 0),
LatLng(89, 0),
LatLng(89, 179.999),
LatLng(-89, 179.999),
],
visible: true,
geodesic: false,
strokeWidth: 0,
),
);
polygon.add(
Polygon(
fillColor: Colors.black.withOpacity(0.5),
polygonId: const PolygonId('test2'),
points: const [
LatLng(-89.9, 0),
LatLng(89.9, 0),
LatLng(89.9, -179.999),
LatLng(-89.9, -179.999),
],
visible: true,
geodesic: false,
strokeWidth: 0,
),
);
if (pointsFromService.length != 0) {
polygon.add(
Polygon(
fillColor: Colors.transparent,
strokeColor: primaryColor,
polygonId: const PolygonId('test3'),
points: pointsFromService,
visible: true,
geodesic: false,
strokeWidth: 2,
),
);
}
}
The result is as follows: (Note that the gray area covers the whole world)