Google Maps flutter Gestures are not working inside stack

user_7679444 0
Viewed 2593

I am using google_maps_flutter. My widget tree is Scaffold -> SingleChildScrollView -> Stack and then google map. I am unable to zoom in and zoom out using gestures.

SingleChildScrollView( Stack(
            children: <Widget>[
              Container(
                height: MediaQuery.of(context).size.height - 10.0,
                width: MediaQuery.of(context).size.width * 1,
                child: _mapView
                    ? GoogleMap(
                        initialCameraPosition: CameraPosition(
                            target: _outletData[0].locationCoords, zoom: 12.0),
                        markers: Set.from(allMarkers),
                        onMapCreated: mapCreated,
                        zoomControlsEnabled: false,
                        zoomGesturesEnabled: true,
                        scrollGesturesEnabled: true,
                        compassEnabled: true,
                        rotateGesturesEnabled: true,
                        mapToolbarEnabled: true,
                        tiltGesturesEnabled: true,
                       
                      )
                    : Container(),
              ),

I also tried below code but still unable to zoom in zoom out using two finger touch

Stack(
            children: <Widget>[
              Container(
                height: MediaQuery.of(context).size.height - 10.0,
                width: MediaQuery.of(context).size.width * 1,
                child: _mapView
                    ? GoogleMap(
                        initialCameraPosition: CameraPosition(
                            target: _outletData[0].locationCoords, zoom: 12.0),
                        markers: Set.from(allMarkers),
                        onMapCreated: mapCreated,
                        zoomControlsEnabled: false,
                        zoomGesturesEnabled: true,
                        scrollGesturesEnabled: true,
                        compassEnabled: true,
                        rotateGesturesEnabled: true,
                        mapToolbarEnabled: true,
                        tiltGesturesEnabled: true,
                        gestureRecognizers: Set()
                          ..add(Factory<PanGestureRecognizer>(
                              () => PanGestureRecognizer()))
                          ..add(Factory<ScaleGestureRecognizer>(
                              () => ScaleGestureRecognizer()))
                          ..add(Factory<TapGestureRecognizer>(
                              () => TapGestureRecognizer()))
                          ..add(
                            Factory<VerticalDragGestureRecognizer>(
                                () => VerticalDragGestureRecognizer()),
                          ),
                      )
                    : Container(),
              ),
flutter google-maps
1 Answers

SingleChildScrollView only supports vertical drag which is used for scrolling.

Adding a gestureRecognizers with the EagerGestureRecognizer to GoogleMap widget will allow dispatch all touch events inside the view bounds. This includes 2 finger pinch gesture for zooming in and out of the map. This will require the following flutter packages:

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

Add this inside of your GoogleMap widget:

gestureRecognizers: < Factory < OneSequenceGestureRecognizer >> [
    new Factory < OneSequenceGestureRecognizer > (
        () => new EagerGestureRecognizer(),
    ),
].toSet()

Here is a sample code:

GoogleMap(
    initialCameraPosition:
    CameraPosition(target: LatLng(-34.397, 150.644)),
    onMapCreated: _onMapCreated,
    zoomControlsEnabled: false,
    zoomGesturesEnabled: true,
    scrollGesturesEnabled: true,
    compassEnabled: true,
    rotateGesturesEnabled: true,
    mapToolbarEnabled: true,
    tiltGesturesEnabled: true,
    gestureRecognizers: < Factory < OneSequenceGestureRecognizer >> [
        new Factory < OneSequenceGestureRecognizer > (
            () => new EagerGestureRecognizer(),
        ),
    ].toSet()
)

I hope this helps! Goodluck on your project

user_112692040
Related