Google maps inside a form in SingleChildScrollView

Question

I have a google map inside column inside SingleChildScrollView. I can pan the map horizontally, but when panning vertically the SingleChildScrollView captures the event and scrolls itself. How can i pan the map when it receives any events, and scroll throught the SingleChildScrollView when the event is in other elemen

SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 12),
            child: Form(
              key: _formKey,
              child: Column(
                children: <Widget>[
                  someInputs...,
                  _buildGoogleMap(),
                  someOtherInpus...,
                ],
              ),
            ),
          ),
        ),

Widget _buildGoogleMap(BuildContext context) {
    return Container(
      height: 300,
      padding: EdgeInsets.only(left: 25.0, right: 25.0, top: 25.0),
      width: MediaQuery.of(context).size.width,
      child: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition:
            CameraPosition(target: currentUserPosition, zoom: 14),
        onMapCreated: (GoogleMapController controller) {
          _googleMapController.complete(controller);
        },
        markers: [
          Marker(
            markerId: MarkerId('1'),
            position: LatLng(
                currentUserPosition.latitude, currentUserPosition.longitude),
            infoWindow: InfoWindow(title: 'Drag and hold this to location!'),
            icon: BitmapDescriptor.defaultMarkerWithHue(
              BitmapDescriptor.hueRed,
            ),
            draggable: true,
            onDragEnd: (LatLng latLng) {
              this._dokanLatLng = latLng;
            },
          ),
        ].toSet(),
      ),
    );

so this is the code i am using to build a form that has some Textfields and a map with draggable marker so that the user can input location. The scrollview is working fine, but when i pan the google map up and down to navigate to a location, the event is not being handled by the map, the scrollview is scrolling even when i try to navigate the map. I want the map to handle its events by itself, so that the list doesnt scroll up and down when i try to pan the map vertically.

https://imgur.com/gallery/WUgfaX0

Answer 1

So the solution was to add to the google map widget, and it worked.

gestureRecognizers: {                 
  Factory<OneSequenceGestureRecognizer>(() => EagerGestureRecognizer())
},

This replaces the default gesture recogniser with the 'eager' version which takes overall priority. As detailed in Flutter's docs:

A gesture recognizer that eagerly claims victory in all gesture arenas.

This is typically passed in AndroidView.gestureRecognizers in order to immediately dispatch all touch events inside the view bounds to the embedded Android view. See AndroidView.gestureRecognizers for more details.

Answer 2

Try this snippet, but not sure because question is not clear.

GoogleMap(
      onMapCreated: _onMapCreated,
      initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 0.0
      ),
      scrollGesturesEnabled: true,
      zoomGesturesEnabled: true,
      myLocationButtonEnabled: false,
      gestureRecognizers: Set()
        ..add( Factory<PanGestureRecognizer>(() => PanGestureRecognizer())),
      polygons: polygon,
      markers: marker,
    );