Google maps inside a form in SingleChildScrollView

user_13461086 0
Viewed 1758

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

flutter
3 Answers

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

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

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,
    );
user_124814790

Use NestedScrollView for better behavior and make the height fixed for the googlemap ... I think this will do the work

user_50396840
Related