Struggling to prevent flutter_map from stealing scroll events

[coogle]

I have a map with a card that floats on top of that map. Inside of the card, I have a ListView that you can scroll through.

Here's the problem: Everything works great until I reach the end of the scroll, at which point it starts zooming in/out the map below it. I have tried everything I could think of to try to prevent this behavior but I can't figure out how to stop the scroll event from propagating from the listview into a zoom... It seems like no matter what I attempt to do, when the list view can't scroll anymore flutter_map is taking over and the scrolls start becoming zoom in/out instead behind the card.

Has anyone experienced this before and can offer some help? I'm straight out of ideas.

This is Flutter 3.27.3, flutter_map 7 on web.

[josxha]

Could you post a showcase video and some code of your implementation please?

[coogle]

Here is a small video. The code is a little harder because it's part of a much larger application but essentially I have this:

FlutterMap -> DetailsLayer -> Card -> Stack -> ListView

As you can see in the video the list view behaves properly until I hit the overflow up/down, at which point the map starts zooming in/out - the behavior I want is at the end of the list additional scrolling does nothing.

Screen.Recording.2025-02-08.at.2.39.32.PM.mov

[josxha]

Thanks! Have you tried to wrap your Layer with a AbsorbPointer?

[coogle]

I have. AbsorbPointer causes the card to break in other ways (the video I showed is actually a state after I clicked a button to show reviews, if I wrap the layer in AbsorbPointer then clicking the button doesn't work at all and the click is transferred to the map)

[josxha]

if I wrap the layer in AbsorbPointer then clicking the button doesn't work at all and the click is transferred to the map

This description sounds a lot like the IgnorePointer. Are you sure that you have tried it with the AbsorbPointer?

[coogle]

Positive, I just did this:

FlutterMap(
 // ....
children: [
    // ...
    AbsorbPointer(
        child: const DetailsLayer()
    )
]
)

The result is as described. The app responds trying to click on a button inside of the card as if the card wasn't there and it clicked-thru to the map.

[josxha]

Strange. Let's try to use a MouseRegion with its onEnter and onExit callback. On enter, disable the scrollWheelZoom gesture of the map, on exit enable it again.

[JaffaKetchup]

If that doesn't work, I'm not sure if this will. But wrap the map in an IgnorePointer widget, then wrap that in a TranslucentPointer widget (from flutter_map)? I'm thinking that may allow the list behind to capture the gesture, and the ignore stops the map.

[coogle]

The MouseRegion technique worked! It's a little kludge but dynamically setting that InteractiveFlag based on onEnter and onExit did the trick.

[coogle]

To be a little more specific:

I couldn't just wrap the direct child of FlutterMap (e.g. the layer we'll just call DetailsLayer) in a MouseRegion. The resulting behavior there was the interactively/scroll worked for the card, but then zoom in/out didn't work at all (basically it acted as if the entire map was inside of the mouse region). Instead, what I had to do was wrap the widget returned inside of DetailsLayer in a MouseRegion (the actual card), and pass onEnter / onExit callbacks into DetailsLayer to a MouseRegion, which set state in the parent widget so that I could dynamically change the InteractiveFlag options in the widget containing FlutterMap

Hope that made sense!

[vnmiso]

I have another hack that might be more preferable because it's a drop-in solution for many situations, feel free to adapt it to your needs.

I put a huge invisible scrollable widget behind the main content and use a TransparentPointer so that scroll events are also forwarded to this invisible scrollable. The invisible scrollable's scroll position is always forced back to the middle so you can practically never reach the ends of that one, and this prevents the scroll events from propagating to the map.

There's also a GestureDetector doing nothing which fixes another issue: clicking on non-interactive parts of your widget also propagates the click events to the map, which is probably not desirable if you have an onMapTap handler.

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import 'package:transparent_pointer/transparent_pointer.dart';

class PopupLayer extends StatelessWidget {
  final double width;
  final double height;
  final LatLng point;
  final Alignment alignment;
  final EdgeInsets padding;
  final Key? childKey;
  final Widget? child;

  const PopupLayer({
    super.key,
    required this.width,
    required this.height,
    required this.point,
    required this.alignment,
    this.padding = EdgeInsets.zero,
    this.childKey,
    required this.child,
  });

  const PopupLayer.empty({Key? key})
      : this(
    key: key,
    width: 0.0,
    height: 0.0,
    point: const LatLng(0.0, 0.0),
    alignment: Alignment.topCenter,
    padding: EdgeInsets.zero,
    childKey: null,
    child: null,
  );

  static final ScrollController _scrollController =
      ScrollController(initialScrollOffset: 5000.0)
        ..addListener(() {
          _scrollController.jumpTo(5000);
        });

  @override
  Widget build(BuildContext context) {
    return AnimatedSwitcher(
      duration: const Duration(milliseconds: 250),
      child: child == null
          ? null
          : MarkerLayer(
        key: childKey,
        markers: [
          Marker(
            width: width + padding.horizontal,
            height: height + padding.vertical,
            point: point,
            alignment: alignment,
            child: Padding(
              padding: padding,
              child: GestureDetector(
                onTap: () {},
                child: Stack(children: [
                  // This hack prevents scroll events from reaching the map when there's no more content to scroll in the popup
                  SingleChildScrollView(
                    controller: _scrollController,
                    child: Container(height: 10000),
                  ),
                  TransparentPointer(child: child),
                ]),
              ),
            ),
          ),
        ],
      ),
    );
  }
}