Flutter — Highlight any area in Google Maps

The Flutter Way
3 min readOct 28, 2022


We have already shown you how to add Google Maps and custom markers to a Flutter app. Let’s take it one step further and show you how to add a circle to your map or identify a specific area City, State, or Country.

Highlight an area on Google Map

Note that: It is already assumed that you know how to add Google Maps to the Flutter app. If not please check my previous article 👉Flutter — Google Map with Custom Marker.

Video tutorial

Initial Setup

It’s time to get started! Here’s a simple screen with a google map widget that sets the initialCameraPosition and a marker.

class GoogleMapScreen extends StatefulWidget {
const GoogleMapScreen({Key? key}) : super(key: key);
State<GoogleMapScreen> createState() => _GoogleMapScreenState();
class _GoogleMapScreenState extends State<GoogleMapScreen> {
final Completer<GoogleMapController> _controller = Completer();
LatLng intialLocation = const LatLng(23.762912, 90.427816);@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
child: GoogleMap(
initialCameraPosition: CameraPosition(
target: intialLocation,
zoom: 15.6746,
onMapCreated: (controller) {
markers: {
markerId: const MarkerId("1"),
position: intialLocation,
// ToDo: Add Circle
// ToDo: Add polygon
Preview: GoogleMapScreen

Add a Circle

The first question is how to add a circle to our map. Replace ToDo: Add Circle with below code 👇

circles: {
circleId: CircleId("1"),
center: intialLocation,
radius: 420,
strokeWidth: 2,
fillColor: Color(0xFF006491).withOpacity(0.2),

The center sets the location for the circle. I’m using intialLocation so that the marker will be the middle point of the circle. The radius value of 430 is suitable, but if the map is not zoomed, then use a larger value. In order to avoid a huge border around the circle, I have set strokeWidth to 2.

Preview with Circle

Highlight a specific area

It’s not always necessary to draw a circle, perhaps you just need to mark a certain area. In order to accomplish this, we use Google Maps Polygons. Need to replace //ToDo: Add polygon with below code

polygons: {
polygonId: const PolygonId("1"),
fillColor: const Color(0xFF006491).withOpacity(0.1),
strokeWidth: 2,
points: const [
LatLng(23.766315, 90.425778),
LatLng(23.764691, 90.424767),
LatLng(23.761916, 90.426862),
LatLng(23.758532, 90.428588),
LatLng(23.758825, 90.429228),
LatLng(23.763698, 90.431324),
Preview of highlight an area

Complete source code 🔥

Take a look at the complete code that has a custom marker. Also, display a warning message if the marker is outside of the selected area. Source code [Patreon]


If I got something wrong? Let me know in the comments. I would love to improve.

Bonus 🥳 Shop UI Kit

Clap 👏 If this article helps you.



Flutter Performance Series: Building an Efficient Widget Tree

13 min read

Sep 20

Build flavors in Flutter (Android and iOS) with different Firebase projects per flavor

11 min read

Apr 17, 2019

Forget the pain of Assets — Flutter💙

3 min read

Feb 2, 2022

Custom shaped AppBar as seen in the “Bunny Search” app

10 min read

Feb 15, 2022

The Flutter Way

Want to improve your flutter skill? Join our channel, learn how to become an expert flutter developer and land your next dream job!