Markers on Google maps in flutter gets a larger touch target on Android compared to iOS - Stack Overflow

admin管理员组

文章数量:1335102

When using Google maps in flutter with markers. The markers will have a larger touch target in Android, compared to iOS.

android touch target

Usually on iOS the touch target is the marker it self, while Android will add padding around the touch target, to make it easier to be clickable. As shown in the picture above, the porblem occurs if I want to make iOS markers easier to hit and creates an image with padding. Then the android markers will have too much padding, causing many misclicks for markers close to each other.

One sultion would be to use different icons for Android and iOS, but I am wondering if there is any better solution out there, like turning off the extra padding given from Android. Also if the markers er close to each other and not overlapping, how would one avoid the misclicks?

When using Google maps in flutter with markers. The markers will have a larger touch target in Android, compared to iOS.

android touch target

Usually on iOS the touch target is the marker it self, while Android will add padding around the touch target, to make it easier to be clickable. As shown in the picture above, the porblem occurs if I want to make iOS markers easier to hit and creates an image with padding. Then the android markers will have too much padding, causing many misclicks for markers close to each other.

One sultion would be to use different icons for Android and iOS, but I am wondering if there is any better solution out there, like turning off the extra padding given from Android. Also if the markers er close to each other and not overlapping, how would one avoid the misclicks?

• android
• ios
• flutter
• google-maps
• google-maps-markers

Share Improve this question Follow edited Nov 21, 2024 at 11:03 user23707915 asked Nov 20, 2024 at 3:53 user23707915user23707915 122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Here you can find more information. This is an old issue reported. link: https://github/flutter/flutter/issues/24865

I have just been playing with this. I was supplying image files at higher resolution, @2x and @3x for iOS and the equivalent for Android. These files are just being ignored and only the base resolution image is being used. iOS then automatically scales the images for higher resolution screens, but Android doesn't do this automatic scaling and just displays the icon at 1x. This is why the icons appear larger on iOS than on Android.

One hack to deal with it:

BitmapDescriptor get deliveryIcon {
   bool isIOS = Theme.of(context).platform == TargetPlatform.iOS;
   if (isIOS)
      return BitmapDescriptor.fromAsset('assets/icons/orange_pin.png');
   else
      return BitmapDescriptor.fromAsset('assets/icons/3.0x/orange_pin.png');
}

A better implementation is using Uint8List:

Future<Uint8List> getBytesFromAsset(String path, int width) async {
  ByteData data = await rootBundle.load(path);
  ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(), targetWidth: width);
  ui.FrameInfo fi = await codec.getNextFrame();
  return (await fi.image.toByteData(format: ui.ImageByteFormat.png)).buffer.asUint8List();
}

Here you have more info:

How to change the icon size of Google Maps marker in Flutter?

本文标签： Markers on Google maps in flutter gets a larger touch target on Android compared to iOSStack Overflow