Map totally distorted with Flutter 3.x.x

[felix-mittermeier]

Flutter 3.0.0 was released this night and unfortunately it broke MapBox on Android.

To reproduce: build the example app with the 3.0.0 version, run it and open for example "Place symbol" Result:

As you can see the map is not in its usual constraint bounds, has a different side ratio, is also moved up and therefore drawn under the status bar. Probably it is just added at x: 0, y: 0 and is therefore in the top left corner.

As you can read in the article introducing the new flutter version here: https://medium.com/flutter/whats-new-in-flutter-3-8c74a5bc32d0 it looks like something regarding the Android platform view has been changed:

Unfortunately I was not able to find more information regarding this change or how this can be fixed.

More information:

• Only Android is affected - iOS and Web are completely fine
• My test device was a Google Pixel 3 XL running with Android 12
• The issue occurs for both options for useHybridComposition (-> true and false give the same result)
• The click event are still registered where the map would be if it was not moved up -> pinch-to-zoom is really wanky now

[SalarPro]

The same problem here

[Hapkiduki]

Same issue when I use with Stack

[Dimolll]

Same issue

[royer]

same issue

[Sipioteo]

Same

[metafounder]

same

[felix-ht]

Seems to be less of an issues on physical devices. However there certainly seem to be some weird stuff going on while navigating.

[Sipioteo]

The map is literally coming hover everything, i can't even see the app bar. It's one of the worst bug i have ever seen. I think it's coming from the flutter v3.0.0 that haave changed some rules hover the andorid views.

I will try to fix it today evening, i never had touched this repo so probably i will not be able to find the issue

[penhorwood]

My physical device (Samsung S10) and my virtual ones are affected by this bug. The map is moved up over the app bar which covers the menu items. This bug has made my app unusable.

[SaeedMasoumi]

It's also laggy on iOS with a 120hz screen.

[felix-ht]

Will try to to look into that - no idea what changed on the flutter side tho

[Sipioteo]

Guys, i have fixed it. Good work

1049

[sawcce]

When will the new update be merged?

[AAverin]

I have tried switching to new initExpensiveAndroidView in a custom branch, that resolves the distortion, but very often app now crashes with

E/flutter (29430): [ERROR:flutter/fml/platform/android/jni_util.cc(204)] java.lang.IllegalStateException: Platform view hasn't been initialized from the platform view channel.
E/flutter (29430):  at io.flutter.plugin.platform.PlatformViewsController.initializePlatformViewIfNeeded(PlatformViewsController.java:732)
E/flutter (29430):  at io.flutter.plugin.platform.PlatformViewsController.onDisplayPlatformView(PlatformViewsController.java:791)
E/flutter (29430):  at io.flutter.embedding.engine.FlutterJNI.onDisplayPlatformView(FlutterJNI.java:1380)
E/flutter (29430):  at android.os.MessageQueue.nativePollOnce(Native Method)
E/flutter (29430):  at android.os.MessageQueue.next(MessageQueue.java:326)
E/flutter (29430):  at android.os.Looper.loop(Looper.java:160)
E/flutter (29430):  at android.app.ActivityThread.main(ActivityThread.java:6718)
E/flutter (29430):  at java.lang.reflect.Method.invoke(Native Method)
E/flutter (29430):  at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:491)
E/flutter (29430):  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

This would need to be resolved before we can close the ticket. I guess it's somehow related to new async composition of native views

[AAverin]

According to https://github.com/flutter/flutter/issues/103630 it should be resolved on Flutter master branch

[AAverin]

As per latest finding by @felix-ht, the exception is resolved on Flutter master. But there is another issue – onStyleLoadedCallback ends up being triggered twice.

[AAverin]

Debugging, looks like platformview gets created twice, caused by Flutter calling PlatformViewCreatedCallback twice.

[sawcce]

Since Sipioteo's PR was closed, have there been any updates? It's really frustrating to have to disable the map everytime I want to do something else with the ui

[AAverin]

Not much can be done until Flutter fixes are done with https://github.com/flutter/flutter/issues/103630.

[sawcce]

Not much can be done until Flutter fixes are done with https://github.com/flutter/flutter/issues/103630.

What about this? https://github.com/flutter/flutter/issues/103630#issuecomment-1129224567

[AAverin]

It only fixes the initial issue with map overlaps and distortions, but there is a bug in Flutter 3 resulting in PlatformViewCreatedCallback being triggered twice. This causes map logic to be called twice, having two calls to onStyleLoadedCallback

[AAverin]

@Sipioteo is welcome to re-create his PR by squashing all commits and having only the necessary changes for the fix

[felix-mittermeier]

It only fixes the initial issue with map overlaps and distortions, but there is a bug in Flutter 3 resulting in PlatformViewCreatedCallback being triggered twice. This causes map logic to be called twice, having two calls to onStyleLoadedCallback

I think what @sawcce means is to also remove the controller.create(); line, which possibly prevent the double callback. I was not able to try it out yet. Can you try it if it fixes the issue?

[sawcce]

It only fixes the initial issue with map overlaps and distortions, but there is a bug in Flutter 3 resulting in PlatformViewCreatedCallback being triggered twice. This causes map logic to be called twice, having two calls to onStyleLoadedCallback

I think what @sawcce means is to also remove the controller.create(); line, which possibly prevent the double callback. I was not able to try it out yet. Can you try it if it fixes the issue?

I did not think of this at first but now that you say it, I think this could be the solution. I was originally referencing this because of my overlapping issues since I wasn't using the onStyleLoaded callback and that the distortion/overlap was the original topic here

I guess trying to remove the call to see if it fixes it could work ?

[AAverin]

@felix-mittermeier According to my tests, whatever is added to the controller is triggered twice by Flutter here: https://github.com/flutter-mapbox-gl/maps/blob/47b77e74cf261cf1ca75938481a0736eb5ca0492/mapbox_gl_platform_interface/lib/src/method_channel_mapbox_gl.dart#L171

I will test now with controller.create() removed

[dan-gandolfo]

Hi everyone ,

Have you some news about this issue?

Daniel

[kamami]

Any updates? When can this be fixed? I tried flutter master channel, but issue still persists...

[dawid-niedzwiecki]

Any updates?

[AAverin]

Issue is blocked by https://github.com/flutter/flutter/issues/103630

[dawid-niedzwiecki]

How did this guy fix the issue? He somehow managed to do it. https://github.com/Sipioteo/maps_3_0_0

[AAverin]

@dawid-niedzwiecki You can see the fix here: https://github.com/flutter-mapbox-gl/maps/pull/1059. It will fix the distortion and some overlap issues, but will bring lots of performance problems. It is due to a regression issue in Flutter described in https://github.com/flutter/flutter/issues/103630. Should be resolved with https://github.com/flutter/engine/pull/33599, once it's merged and released to Flutter stable channel.

[penhorwood]

This issue is waiting on https://github.com/flutter/engine/pull/33599 on the flutter engine. Not sure what is keeping this pull request from being merged. Leave at comment at the link to show the number of people waiting on this.

[MapleNoise]

How did this guy fix the issue? He somehow managed to do it. https://github.com/Sipioteo/maps_3_0_0

@dawid-niedzwiecki Like that :

  mapbox_gl:
    git:
      url: https://github.com/Sipioteo/maps_3_0_0.git
      ref: master

[AAverin]

@MapleNoise You can also do the same using this branch https://github.com/flutter-mapbox-gl/maps/pull/1059 as reference. But, just to be clear, that branch fixes distortion on Flutter 3, but introduces other issues like performance problem and regular crashes. Which is why we are waiting for Flutter team to roll back their changes to the PlatformViews in the engine before we merge anything. Big chance PR will be just deleted because after engine rollback no changes will be necessary.

[BerndWessels]

Any indication if this issue will be fixed in Flutter 3 anytime soon? Unfortunately it sometimes takes ages for Flutter issues to be addressed.

[danehale0612]

Anyone know any workarounds for this? Did anyone downgrade flutter versions to fix or anything? I have a Mapbox map drawing over my Floating Action Buttons

[lonelyteapot]

@danehale0612, downgrade Flutter to 2.10.5 or less. Run flutter downgrade or checkout your local flutter repo to tag 2.10.5

[kamami]

Can this be fixed with flutter 3.0.2?

[felix-mittermeier]

Can this be fixed with flutter 3.0.2?

3.0.2 has already been published, see here: https://github.com/flutter/flutter/wiki/Hotfixes-to-the-Stable-Channel but unfortunately it does not include a fix for this. We will have to wait until the next release.

[wanoghoco]

this issue also occurs when trying to integrate camerax or creating camera plugin with flutter using androidview

[BerndWessels]

Does this statement make sense to anybody with deeper knowledge of the Mapbox plugin https://github.com/flutter/engine/pull/33599#pullrequestreview-1014660559 ? Is there another way to fix this by changing the how the mapbox plugin works?

[babayaga2002]

Is it working now ??

The Map just covers everything on the home page

[penhorwood]

The changes to Flutter 3.x were merged into Flutter main a few hours ago. What needs to happen on mapbox_gl to return us to a working version?

[AAverin]

If all is good, then, hopefully, nothing. This PR (https://github.com/flutter-mapbox-gl/maps/pull/1059) tries to apply some suggestions from the original Flutter thread. But if everything was reverted then changes in that PR shouldn't be necessary anymore.

Could you please test if latest mapbox library works on latest Flutter master? I will also do my own testing when I get some free time.

[penhorwood]

I am currently on vacation but I will test once I return home next week.

[motrieux-thomas]

Could you please test if latest mapbox library works on latest Flutter master? I will also do my own testing when I get some free time.

@AAverin I just tried the latest mapbox library on the latest Flutter master (3.1.0-0.0.pre.1360) and the problem isn't resolve. The map stay on the top of the screen.

By the way the fix (https://github.com/Sipioteo/maps_3_0_0) works perfectly on the latest master (3.1.0-0.0.pre.1360) and stable (3.0.3).

[penhorwood]

I appears that the VirutalDisplay fix on the Flutter engine was merged into Flutter master just a few hours ago. The first merge was into Flutter / Engine. Then they have some automated task that rolls that into Flutter master. It appears complicated to me. But I think you might want to try your test again.

[lonelyteapot]

It's finally fixed on Flutter main! Works as before for me.

[DARLINGTON-CG]

Which flutter version, and mapbox version was this fixed please?

[lonelyteapot]

Which flutter version, and mapbox version was this fixed please?

Flutter engine revision e986f43ab Flutter 3.1.0-0.0.pre.1364 (current state of the main branch) mapbox_gl 0.16.0 (no fix was needed)