Map not animating to the location when picking from dropdown.

[martin-braun]

https://stackoverflow.com/a/72052990/8631092

Describe the bug When a user tries to search on the search bar, he either enters or choose the location from the suggestions below, the maps refreshes for a bit and then just stays where it was before. The result gets updated but the map does not animate to the location selected.

To Reproduce I'm providing a gist to the dart file where I'm using the package gist.github.com/uV3301/a01b8fb3111c97673f13ff9be861ad04

Expected behavior The expected behavior should be that after the search selection, the map should animate to the query location.

Screenshots

Flutter Doctor -v

[✓] Flutter (Channel stable, 2.2.0, on Linux, locale en_IN)
    • Flutter version 2.2.0 at /home/uv3301/snap/flutter/common/flutter
    • Framework revision b22742018b (4 weeks ago), 2021-05-14 19:12:57 -0700
    • Engine revision a9d88a4d18
    • Dart version 2.13.0

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /home/uv3301/Android/Sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /home/uv3301/Applications/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✗] Chrome - develop for the web (Cannot find Chrome executable at
    google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[✓] Android Studio (version 4.1)
    • Android Studio at /home/uv3301/Applications/android-studio
    • Flutter plugin version 55.1.1
    • Dart plugin version 201.9335
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] Connected device (1 available)
    • Android SDK built for x86 64 (mobile) • emulator-5554 • android-x64 •
      Android 9 (API 28) (emulator)

! Doctor found issues in 1 category.

Additional context Additionally the error on console is such :

E/flutter (16385): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: MissingPluginException(No implementation found for method camera#animate on channel plugins.flutter.io/google_maps_3)
E/flutter (16385): #0      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:156:7)
E/flutter (16385): <asynchronous suspension>
E/flutter (16385): #1      _PlacePickerState._moveTo (package:google_maps_place_picker/src/place_picker.dart:346:5)
E/flutter (16385): <asynchronous suspension>
E/flutter (16385): #2      _PlacePickerState._pickPrediction (package:google_maps_place_picker/src/place_picker.dart:337:5)
E/flutter (16385): <asynchronous suspension>
E/flutter (16385): 
I/flutter (16385): state: SearchingState.Idle, isSearchBarFocused: false

_Originally posted by @uV3301 in fysoul17#125 (comment)

[martin-braun]

https://stackoverflow.com/a/72052990/8631092

issue solved from this fix

Originally posted by @Milinda1313 in fysoul17#125 (comment)

[yigitcevik]

@martin-braun The Example codes of the package are in "PickArea: CircleArea..." code available. This code has been converted to a comment line. When I opened this code and searched, I saw that the map moved to the selected address. However, when you open the code, I get a "Place not in area" error for the address I came from on the map.

[martin-braun]

@yigitcevik Please do not post in an issue that is not relevant to your issue, I replied on #25

[todosrc]

i have same issue , how to fix ?

[martin-braun]

i have same issue , how to fix ?

Please make a new issue explaining your issue in detail. Also give device info and flutter doctor -v output. Thanks.

[martin-braun]

@sarmiladhandapani The fix was described here: stackoverflow.com/a/72052990/8631092

I'm not sure if you can implement this fix on your consuming application, but your flutter doctor -v output and device info at #36 shall be helpful to get this resolved in this package.

Device: Pixel 5 API Thiramisu
Flutter version 3.0.1

[martin-braun]

This issue is a big one. Melinda's fix to convert the widget into a stateful widget by using a wrapper has no effect. The issue boils down to this:

When you change the device orientation or enter the search bar (which will show the keyboard) you will get redraws. Those redraws will re-render the map. If you select a target from the dropdown, the keyboard will be hidden and the code tries to animate to the new location while the Google Maps component re-renders.

I was able to minimize the issue by wrapping the map within a SingleChildScrollView with NeverScrollableScrollPhysics and setting resizeToAvoidBottomInset to false. This will stop the map to re-render when the keyboard is shown or hidden, but it will break the map when it's not fullscreen. A place picker within a smaller container will have wrong offsets that I cannot determine. The parent Scaffold shall resizeToAvoidBottomInset and the whole thing breaks anyways.

We are facing an uncertain situation.

I remember that I never had such rendering problems with the Place Picker in the past, but suddenly it began to cause problems on my physical device. I also reverted to a much earlier stage only to figure out that there is no point in which this problem was introduced. Any stage is affected, which makes no sense to me.

The problem grew to a much bigger problem.

It's not just the fact that re-rendering will cause a crash on animating, also that re-rendering causes heavy flickering and even cause the map to be white sometimes. Even if I can minimize the issue by not re-rendering on keyboard toggle, those issues will still occur on device orientation change.

[martin-braun]

@negiot, @berkekesikbas, @sarmiladhandapani, after many hours of debugging I finally found the root cause for the problem and fixed it as good as possible. If you update to mb.22 the issue should be solved.

If you care about what've happened and related issues we still face beyond this one, read on:

The original author thought it was a good idea to put a future within a future builder in a way that it will re-execute whenever a new render happens. This future is to load the current location. When the keyboard toggles there will be a new render, but GoogleMap will not rebuild itself usually, but in this case it did, because the future I mentioned before was re-executing, causing the Google Map component to be hidden for a second, thus respawning the entire component and thus re-initializing it entirely.

Since your keyboard hides when you select a place, it would try to animate the camera on a component that was disposed and replaced already. It was more likely to happen, when you had the place picker inside a container.

With the new version these issues are solved, but flickering on keyboard toggle as well as device orientation change is still a problem. You can solve such problems by enabling Hybrid Composition like so:

if(Platform.isAndroid) {
  AndroidGoogleMapsFlutter.useAndroidViewSurface = true;
}

There is also property called resizeToAvoidBottomInset on the PlacePicker which you can set to false to prevent resizing of the map when the keyboard toggles and thus avoid unnecessary redraws. It wasn't working at all, but I fixed it for fullscreen usage at least, so I suggest to set it to false if you use the map in fullscreen.