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 flutter/flutter#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 flutter/flutter#103630.

[sawcce]

Not much can be done until Flutter fixes are done with flutter/flutter#103630.

What about this?
flutter/flutter#103630 (comment)

[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:

maps/mapbox_gl_platform_interface/lib/src/method_channel_mapbox_gl.dart

Line 171 in 47b77e7

controller.addOnPlatformViewCreatedListener(

I will test now with controller.create() removed

[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)

[PhilippMatthes]

Hi, is there a rough ETA of this change in stable?

[AAverin]

@PhilippMatthes That is probably a question to Flutter devs as no fixes in Mapbox should be required after VirtualDisplay support was rolled back.

[PhilippMatthes]

True, but I thought that you'd maybe have an estimate for yourself. The fixes are in the current "master" version based on 3.1.0, right? How long would it probably take for stable (currently 3.0.3) to catch that up?

[BerndWessels]

I feel like this comment is a bit concerning. Basically saying that plugins better use a different way, since the current way might be unstable?
Any thoughts from the mapbox experts?

[AAverin]

This isn't something Flutter plugins can fully control when they wrap around some other native library.
The decision on how to draw, TextureView or SurfaceView, is made by Mapbox Android SDK: https://github.com/mapbox/mapbox-gl-native-android/blob/a82dcd9d8aa21dd9a285f319d33755d9333f917a/MapboxGLAndroidSDK/src/main/java/com/mapbox/mapboxsdk/maps/MapView.java#L315

I am not sure I know exactly how external texture composition works. In my experience with Android it was usually either TextureView or SurfaceView.

[treacks5]

Any news about this issue ? We still hope one day to upgrade our project to Flutter 3.x.x

[lonelyteapot]

Any news about this issue ? We still hope one day to upgrade our project to Flutter 3.x.x

It's fixed on Flutter master. Only a matter of time before it will be on stable. No one but Flutter maintainers can tell when.

Perhaps this should be closed?

[AAverin]

I am closing this issue as the main problem with VirtualDisplay is fixed on Flutter master and no fix in mapbox is required.
Still, FYI, there is another blocker for Flutter 3 migration that still requires investigation. On Flutter 3 there is a NullPointer exception coming out of native mapbox library. There should be another issue opened for that.

[shilangyu]

What about this issue: #1059 (comment)? Will it be tracked in flutter-mapbox-gl or is it assumed to be a problem on flutter's side?

[AAverin]

@shilangyu Help is welcome to investigate the problem. I am also trying to debug what could be the cause of the NPE crash.
If someone else can reproduce the crash you are welcome to create a new issue in flutter-mapbox-gl.

[AAverin]

I have created a new ticket to investigate the crash: #1119

[AAverin]

Looks like in some cases there is still an issue with overlap in Flutter engine. Not sure if it affects mapbox, did anyone experience any problems on latest flutter master?

New issue in Flutter: flutter/flutter#107313

[wanoghoco]

Yes, i experience the same problem trying to implement native camerax on Android flutter

[treacks5]

I tried with the latest flutter beta version 3.3.0-0.2.pre :

Flutter 3.3.0-0.2.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 7ac27ac8e6 (6 days ago) • 2022-08-02 14:35:08 -0700
Engine • revision d1e7dc18bf
Tools • Dart 2.18.0 (build 2.18.0-271.4.beta) • DevTools 2.15.0

And it seems to be fixed. I don't have any issue with the map at the top of everything 🙂

[hamsadev]

I tried with the master channel and the problem is solved for now

[marcobraghim]

Hey guys, the solution on the issue #1008 works for me

[felix-mittermeier]

The fix should now also be available on the stable branch: flutter/flutter#103630 (comment)

as Flutter 3.3. has been released this night: https://github.com/flutter/flutter/wiki/Hotfixes-to-the-Stable-Channel

[cohenadair]

The fix should now also be available on the stable branch: flutter/flutter#103630 (comment)

as Flutter 3.3. has been released this night: https://github.com/flutter/flutter/wiki/Hotfixes-to-the-Stable-Channel

I can confirm that everything is working as expected with Flutter 3.3 stable branch.

[dan-gandolfo]

Hi,

This issues is always present in the version 3.3.2. Have you a workaround?

Daniel

[cohenadair]

Hi,

This issues is always present in the version 3.3.2. Have you a workaround?

Daniel

I'm still running 3.3.0 and it's working as expected. Has this issue regressed? Did it just start happening again for you on 3.3.2?

[dan-gandolfo]

Sorry, I don't know why VS code does not use the good version of flutter when I switch version with FVM.
I confirm to you that in version 3.3.0 and in version 3.3.2 all work as expected.