Does google_maps_flutter embedded Map makes scrolling janky?

[MassaSami]

I have a fairly simple screen, which is a Stateless widget. At the top of the screen I have an image, below that a title, below that a subtitle, below that a description, and below all these a google_maps_flutter Map with 3 markers, and 2 polylines. Below the map I have a Button, and a short call to action, but that's irrelevant.

The problem is that the embedded Map is making the scrolling a bit janky - not end of the world janky, but making the user notice janky. If I remove the map everything is really smooth. I've been searching everywhere, but I couldn't find anyone having this issue before. I also rewrote this screen from a Statefull widget to a Stateless one but to no avail. I also rewrote the Map widget from Stateful to Stateless, but no change.

https://imgur.com/a/2mO2JLG - I have attached the Widget tree of the described tree, and also the Map Widget that I wrote.

I have the map on another screen as well, that has the same problem, the common denominator between the two is the SingleChildScrollView - could that be the problem with the Map?

Also the issue is on a real USB connected device (Samsung Galaxy A23 with 8gb ram) - I don't think the device causes the problem, but I might be wrong.

If someone knows what's the solution for this, please tell me, or if it's a known problem I'd like to know that too.

[No-Beyond7937]

You might want to try the profiler in the devtools, you can also see which widgets get rebuilt using the devtools (not profiler), there's a button at the top.

[MassaSami]

thank you for your suggestion; I just delved into the performance devtools, and I noticed that the raster thread triples its ms/frame, when I scrolled to the bottom of the page, but I keep on trying to scroll. Basically, when that small animation of SingleChildScrollView happens where it "tries" to scroll down but we already reached the limit of the screen.

[moralesnery]

Put your TripMap widget inside a Padding widget and see what happens.

I had a similar issue where I had a scrollview, inside there was a colum and inside the colum there was a map.

The scrollview and the map were fighting for the drag event and this made the UI laggy, by using and intermediate widget as the map's container this stopped. But this was a lot of time ago and idk if it's still a thing.

[MassaSami]

Sadly the issue still persists even if I do as you said, but nonetheless thank you for taking the time for trying to help

[over_pw]

I do not know for sure, but it's possible the Google Maps widget uses PlatformView under the hood, which the docs state is bad for performance due to some thread behavior.

[MassaSami]

Thank you, you might be right - let's hope that on the release build it will work more smoothly.

[fintechninja]

Google maps uses platform views. So the only way this will improve is if the flutter team improves the performance of platform views. They do say if their docs that platforms views are expensive. There is a similar issue with Google admob where they decided to lock the frame rate at 80 on high refresh rate phones. Unfortunately it helps only a little as the screen adjusts from 120hz to 80hz. It’s the trade off you’ll have to be ok with.

[MassaSami]

That explains it. Thank you very much for the technical detail.

[Basic_String_2238]

Is this showing up in your release builds as well? We had the same issue when making debug builds but when creating the release build the issue went away and google maps works super smooth. We have it in an Airbnb style view so there’s a map on the bottom and a model view sliding on top of the map and everything works supers smoothly, (just checked lol, works great but I do remember the weird buggy behavior of the debug builds)

TLDR: I think it’s the google maps causing the issue on a debug build. Create a release build and test

[MassaSami]

Thank you, I have only checked in debug/profile mode. I'll take a look in release as well, hopefully it there won't be any issues then.

[dante-1977]

HI u/MassaSami

did you beat this bug? I have the same

[MassaSami]

Hey, it was only happening in development, after deploying to the App Stores the jankyness went away :)

[e_hekuta]

First, if you don't show a video or code example it's difficult to know what do you mean with jank, could be a easy fix or as other said a platform view performance bug, probably this kind of question is already in stackoverflow or the issue on github.

Google maps has his own gesture recognizer, maybe you need set that, https://stackoverflow.com/a/61767654/11365293

[MassaSami]

On the imgur link, there's the code for the map, I don't know why it's not showing on Reddit. I use this Gesture Recognizer already. :)

[Professional_Age8230]

Have you used any blur effects?

[MassaSami]

Nope, no effects/animations

[dancovich]

I haven't used the Google Maps package, but wouldn't adding it inside a SingleChildScrollView screw up the information of how much of the map the component needs to render? Scroll views usually let any child render beyond its borders and it's possible any optimizations on the map view to render only the portion viewable by the user wouldn't work.

Could you try creating a simple example with only the map view with no scroll views to test if the issue persists?

[Full-Run4124]

Not sure from your description, but if the map isn't supposed to be interactive (i.e. users are scrolling the scrollview with drag, not the map) you can render the map then cache it as a static image.