flutter_map
flutter_map copied to clipboard
fleaflet
[BUG] MacOS: `GestureDetector`s stop responding after zooming
What is the bug?
Problem When zooming in and out of flutter maps sometimes it occurs that widgets that use Gesture detectors internally such as Buttons, Attribution Widgets, and Draggable markers stop responding. I initially noticed this problem when using flutter draggable markers, so I reported an issue here: https://github.com/ibrierley/flutter_map_dragmarker/issues/27, and after some help and testing, I realized there was a problem with other widgets that use Gesture Detectors on Flutter Maps as well.
There is no specific trigger as to when this happens. I have tested it on macOS and Windows with the latest version of flutter maps and the problem still exists.
Flutter and Dart version used: Flutter 3.10.5 • channel stable • https://github.com/flutter/flutter.git Framework • revision 796c8ef792 (2 weeks ago) • 2023-06-13 15:51:02 -0700 Engine • revision 45f6e00911 Tools • Dart 3.0.5 • DevTools 2.23.1
Plugins: flutter_map: 5.0.0 latlong2: 0.9.0 url_launcher: 6.1.10
Example Here's a minimalistic example to expose what's happening. I've included a button at the bottom (+) that displays an alert dialog and also a SimpleAttributionWidget with the link to open Open Street Maps Contributors like this:
I'm using the mousepad to zoom in and out of the maps, and in the first video below you'll notice, that in the beginning, I click the + button and a pop-up button appears, but at around 7 seconds I try clicking the same button and there is no response. Also when clicking on OpenStreetMap Contributors the link doesn't open.
https://github.com/fleaflet/flutter_map/assets/60810797/51b6303d-2797-4fd5-ab6d-cb92d9cf0479
A similar example is in the video below. I click the + and it works as expected at the beginning and at around 3 seconds, but at 8 seconds it doesn't work again.
https://github.com/fleaflet/flutter_map/assets/60810797/dec93e93-d53f-480f-a708-18f9f77b67e1
How can we reproduce it?
To reproduce the bug in the example shown above use the code below:
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:latlong2/latlong.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(
const MaterialApp(
home: ZoomTest(),
),
);
}
class ZoomTest extends StatelessWidget {
const ZoomTest({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Maps Zoom Test'),
),
body: Padding(
padding: const EdgeInsets.all(8),
child: Center(
child: FlutterMap(
options: MapOptions(
center: const LatLng(51.5, -0.09),
zoom: 5,
maxZoom: 19,
maxBounds: LatLngBounds(
const LatLng(-90, -180),
const LatLng(90, 180),
),
),
nonRotatedChildren: [
Align(
alignment: Alignment.bottomLeft,
child: IconButton(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return const AlertDialog(
content: Text(
'Button Pressed',
textAlign: TextAlign.center,
),
);
},
);
},
icon: const Icon(Icons.add),
),
),
SimpleAttributionWidget(
source: const Text('OpenStreetMap contributors'),
onTap: () => launchUrl(
Uri.parse('https://openstreetmap.org/copyright'),
),
)
],
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
userAgentPackageName: 'dev.fleaflet.flutter_map.example',
)
],
),
),
),
);
}
}
As an alternative, this can be tested on the example app of flutter_maps and even the example of flutter_map_dragmarker.
Do you have a potential solution?
No response
Platforms
Windows 11(x64), macOS
Severity
Minimum: Allows normal functioning
Out of interest, could you try the examples on the LatLngToScreenPoint flutter_map example (that examples places an icon where you click on the screen). I'm wondering whether it's not registering events, or if the events are somehow misaligned and registering elsewhere. So I'd be curious if you click on the screen and the images end up offset a bit, or if they don't register at all.
So I tried it out and in this case, it doesn't register the event at all. So in the video below. it seems to register the first three tap events, but at 0:12 I try clicking an area and there is no response whatsoever. The same goes for the two points clicked on at 0:16 & 0:18 seconds.
https://github.com/fleaflet/flutter_map/assets/60810797/b0735a7a-f02c-4412-80bd-9e2a7aa89886
Hmm, I can't seem to reproduce this. Running on Windows 11 (x64) and the live web demo, zoom does not seem affect the tap response.
I can't figure out why this might be, but the only difference I can immediately see is your zoom seems to be smoothed - other than the MacOS platform, but you said you could reproduce on Windows. Is there zoom smoothing on Windows as well? Can you also try on the live web demo?
My sincere apologies @JaffaKetchup . I was testing it on Windows but on an older version of an example app that wasn't working on the latest version of flutter or flutter maps, and I can't seem to reproduce the error on Windows 11 now. I also tried the live demo app and I used the double click to zoom but I also did not run into an error here. Sorry for the confusion.
Yes. I tested it again to make sure, and I still have the problem.
The summary from running flutter doctor: jshe@MacBook-Pro flutter_map % flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.10.5, on macOS 12.5.1 21G83 darwin-arm64, locale en-DE) [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1) [✓] Xcode - develop for iOS and macOS (Xcode 14.2) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.3) [✓] Android Studio (version 2021.3) [✓] VS Code (version 1.76.2) [✓] Connected device (2 available) [✓] Network resources
• No issues found!
Ok, is there any way you can test without zoom smoothing? I'm assuming that's part of the mouse or its drivers. I'll track this with the other MacOS gesture issues.
I'll check if there is a workaround without the zoom smoothing and let you know.
So I tried disabling the smoothing when zooming on macOS but the problem still exists.
Another thing I noticed is that if I pan the screen when this happens, it works again. So at around 6 seconds, I try tapping the screen and it doesn't work, and at 11 seconds I pan the screen, and then it works as expected.
https://github.com/fleaflet/flutter_map/assets/60810797/5ed908b8-53f5-4095-925d-8421417657a8
im facing the same issue on IOS/Android, ontap on markers doesnt work anymore after i zoom in.
And I have just noticed something new, scroll zoomin(when I tap my finger once and then drag the map) taps wokrs, after scroll zoom in and scroll zoom out but not with double finger zoom in
Could https://github.com/flutter/flutter/issues/140730 be related? In general flutter itself seems quite messy on the touch/gesture side right now.
It could be fixed by my patch https://github.com/flutter/engine/pull/49424, although this is only for trackpad pinch, if you have any problem with iOS/Android touchscreen, it is something else...
We're going to close this for now, as it will be assumed fix and will require re-verification if the issue still occurs. Thanks @moffatman!