How to show Active area of google map in flutter

Table of Contents

Sometimes we need to show the selected area on Google Maps by de-selecting the outside area of the map as shown in the image. Here in this quick tutorial How to show an active area on Google Maps in a flutter.

How to show active areas on Google map in Flutter

Create a polygon that covers the entire Map in a dark
The second polygon Shows the highlighted area in White.
Get the polygon coordinated and pass in the list of Latlong to Show the Selected Area
Here are the Full code and steps below

Step 1:

Create the Set polygon function to create the polygons and to provide the polygon to the GoogleMap widget

Set<Polygon> _createPolygons() {

}

Create this one in your state Class anywhere below or above the build method.

Step 2:

Now inside this function add one polygon set and a List of Quardinates which make the selected area of Map. Its just a list of lat long to tell the Polygon outlining.

    final polygons = <Polygon>{};
    List<LatLng> _createPolygonPoints() {
      return const [
        LatLng(30.715371, 76.691045),
        LatLng(30.725997, 76.708383),
        LatLng(30.732784, 76.705465),
        LatLng(30.775860, 76.780824),
        LatLng(30.722603, 76.818418),
        LatLng(30.667248, 76.731557),
      ];
    }

Step 3:

Now below that the the first polygon which covers the entire map with a dark color. This polygon is for showing the deselected part of the map. Here is the code that comes under that.

  polygons.add(
      Polygon(
        fillColor: Colors.black.withOpacity(0.5),
        polygonId: const PolygonId('test2'),
        points: const [
          LatLng(85,90),  LatLng(85,0.1),
          LatLng(85,-90),  LatLng(85,-179.9),
          LatLng(0,-179.9),  LatLng(-85,-179.9),
          LatLng(-85,-90),  LatLng(-85,0.1),
          LatLng(-85,90),  LatLng(-85,179.9),
          LatLng(0,179.9),  LatLng(85,179.9)

        ],
        visible: true,
        geodesic: false,
        strokeWidth: 0,
      ),
    );

As declared polygons variable just use the add() function to add a new polygon here in this we specify the point of the entire map, fillColor, stroke, etc.

Step 4:

Here comes the part where we need to add the Selected area in a light white color. first Check the list of Points is not empty and then add the polygon as added before

    if (_createPolygonPoints().isNotEmpty) {
      polygons.add(
        Polygon(
          fillColor: Colors.white.withOpacity(0.3),
          strokeColor: Colors.black,
          polygonId: const PolygonId('test3'),
          points: _createPolygonPoints(),
          visible: true,
          geodesic: false,
          strokeWidth: 2,
        ),
      );
    }
    return polygons;

Added White color with opacity and points as list as we made the list as _createPolygonPoints(). At the end of the function just return polygons.

Step 5:

Now just add this polygon to the Google map widget to show it on the screen. make sure to add the necessary dependencies and API key for Google Maps.

GoogleMap(
        myLocationButtonEnabled: false,
        zoomGesturesEnabled: true,
        zoomControlsEnabled: true,
        myLocationEnabled: false,
        mapType: MapType.normal,
        polygons: _createPolygons(),
        gestureRecognizers: Set()..add(Factory<PanGestureRecognizer>(() {
          return PanGestureRecognizer();
        })),
        initialCameraPosition: const CameraPosition(
          target: LatLng(30.667248, 76.731557),
          zoom: 10.0,
        ),
      ),

Change the rest of the values accordingly like initialCameraPosiition, zoomGesturesEnabled, mapType, etc.

Full Code:

Here is the full file if anyone wants to make a stateful widget with this just copy and paste the below code and use it accordingly.

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class GoogleMapsSelection extends StatefulWidget {
  const GoogleMapsSelection({Key? key}) : super(key: key);

  @override
  State<GoogleMapsSelection> createState() => _GoogleMapsSelectionState();
}

class _GoogleMapsSelectionState extends State<GoogleMapsSelection> {
  
  Set<Polygon> _createPolygons() {
    final polygons = <Polygon>{};
    List<LatLng> _createPolygonPoints() {
      return const [
        LatLng(30.715371, 76.691045),
        LatLng(30.725997, 76.708383),
        LatLng(30.732784, 76.705465),
        LatLng(30.775860, 76.780824),
        LatLng(30.722603, 76.818418),
        LatLng(30.667248, 76.731557),
      ];
    }


    polygons.add(
      Polygon(
        fillColor: Colors.black.withOpacity(0.5),
        polygonId: const PolygonId('test2'),
        points: const [
          LatLng(85,90),  LatLng(85,0.1),
          LatLng(85,-90),  LatLng(85,-179.9),
          LatLng(0,-179.9),  LatLng(-85,-179.9),
          LatLng(-85,-90),  LatLng(-85,0.1),
          LatLng(-85,90),  LatLng(-85,179.9),
          LatLng(0,179.9),  LatLng(85,179.9)

        ],
        visible: true,
        geodesic: false,
        strokeWidth: 0,
      ),
    );
    if (_createPolygonPoints().isNotEmpty) {
      polygons.add(
        Polygon(
          fillColor: Colors.white.withOpacity(0.3),
          strokeColor: Colors.black,
          polygonId: const PolygonId('test3'),
          points: _createPolygonPoints(),
          visible: true,
          geodesic: false,
          strokeWidth: 2,
        ),
      );
    }
    return polygons;
  }



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        myLocationButtonEnabled: false,
        zoomGesturesEnabled: true,
        zoomControlsEnabled: true,
        myLocationEnabled: false,
        mapType: MapType.normal,
        polygons: _createPolygons(),
        gestureRecognizers: Set()..add(Factory<PanGestureRecognizer>(() {
          return PanGestureRecognizer();
        })),
        initialCameraPosition: const CameraPosition(
          target: LatLng(30.667248, 76.731557),
          zoom: 10.0,
        ),
      ),
    );
  }
}

Here is How to show the active area in flutter google maps. It is just a quick fix just copy the code and get it working.

For more Flutter tutorials, Tips, Tricks, Free code, Questions, and Error Solving.

Remember FlutterDecode.com

How to show active area in Flutter Google Maps – Deselect the outside area of Google Maps in Flutter