onTap GoogleMap срабатывает при нажатии FloatingActionButton (Flutter web)

Question

Я делаю веб-приложение с Flutter, используя пакет google_maps_flutter. Я добавил GoogleMap в свое веб-приложение с событием onTap, которое добавляет маркер на карту. Я также хочу добавить плавающую кнопку действия поверх карты, но проблема в том, что всякий раз, когда нажимается кнопка (щелчок левой кнопкой мыши с помощью мыши на компьютере), добавляется новый маркер, потому что срабатывает onTap. Я не хочу этого. Как я могу это исправить? Единственное, о чем я могу думать, это onLongPress (щелкните правой кнопкой мыши на компьютере), но я бы предпочел избежать этого, если есть другой способ, сохраняя 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

Это распространенная проблема в сети Flutter, подробно описанная в этом выпуске:https://github.com/flutter/flutter/issues/72273.

В двух словах, чтобы решить вашу проблему, вы должны добавить этот пакет в свой проект:https://pub.dev/packages/pointer_interceptor

Затем оберните FloatingActionButton виджетом PointerInterceptor. Окончательный код должен выглядеть так:

      floatingActionButton: PointerInterceptor(
   child: FloatingActionButton.extended(
      onPressed: _calculate,
      backgroundColor: Colors.green,
      label: const Text('Calculate'),
      icon: const Icon(Icons.calculate),
    ),
 ),