CODEWITHSUNDEEP
flutterdartgoogle-maps-flutter
Melik BOZKURT
Melik BOZKURT

Reputation: 180

Flutter Google Maps how to show active areas with border

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.

enter image description here

Note: As I mentioned before, I can get this image using polygons, but I cannot make the outside of the polygons gray.

Upvotes: 5

Views: 3591

Answers (2)

Matt
Matt

Reputation: 3180

Polygon has a holes parameter which accepts a list of List<LatLng>. What you want to do is create one big polygon that covers the world (or viewport) and set that to be the background color. Then put your actual polygon(s) that you want to draw in the holes section to create a cutout:

Polygon maskedArea = new Polygon(
  fillColor: Colors.black.withOpacity(0.5),
  polygonId: new PolygonId('test'),
  holes: [<LatLng>[new LatLng(10, 10), new LatLng(40, 10), new LatLng(40, 40), new LatLng(10, 40)]],
  points: <LatLng>[new LatLng(0, 0), new LatLng(50, 0), new LatLng(50, 50), new LatLng(0, 50)]
);

If you're open to using plugins, there is also syncfusion_flutter_maps which seems to use a custom vector drawing solution to achieve a more robust result through the MapPolygonLayer.inverted constructor (I have not used this plugin myself but have used others from the developer and would anticipate no issues here).

enter image description here

Upvotes: 4

Melik BOZKURT
Melik BOZKURT

Reputation: 180

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)

enter image description here

Upvotes: 4

Related Questions