onTap of GoogleMap triggered when clicking FloatingActionButton (Flutter web) - flutter

Question

I'm doing a web application with Flutter using the google_maps_flutter package. I added a GoogleMap to my web app with onTap event which adds marker on the map. I also want to add a floating action button on top of the map but the problem is that whenever the button is clicked (left click using a mouse on a computer), a new marker is added because onTap is triggered. I don't want that. How can I fix it? The only thing I can think of is onLongPress (right click on a computer) but I'd prefer to avoid it if there is another way by keeping onTap.
void _addLocation(LatLng latLng){
setState(() {
_locationsCount++;
_locations.add(Marker(
markerId: MarkerId(_locationsCount.toString()),
position: latLng,
));
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
children: <Widget>[
GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 8.0,
),
onTap: _addLocation,
markers: Set<Marker>.of(_locations),
),
Text(
'Number of locations: $_locationsCount',
),
],
),
floatingActionButton: FloatingActionButton.extended(
onPressed: _calculate,
backgroundColor: Colors.green,
label: const Text('Calculate'),
icon: const Icon(Icons.calculate),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}

Answer 1

This is a common problem in Flutter web described in details in this issue :
https://github.com/flutter/flutter/issues/72273
In a nutshell to solve your problem you should add this package to your project :
https://pub.dev/packages/pointer_interceptor
Then wrap FloatingActionButton with the PointerInterceptor widget.
The finale code should look like this :
floatingActionButton: PointerInterceptor(
child: FloatingActionButton.extended(
onPressed: _calculate,
backgroundColor: Colors.green,
label: const Text('Calculate'),
icon: const Icon(Icons.calculate),
),
),