Flutter Googlemap Is Blank After Resuming From Background

I'm experiencing the following issue: My Flutter app uses a GoogleMap. The map loads just fine initially. However, if I put the app into the background and resume a while later, th

Solution 1:

I discovered that if you tap a marker or change the style the map re-renders

classTheWidgetThatHasTheMapwithWidgetsBindingObserver {

   //...your code@overridevoiddidChangeAppLifecycleState(AppLifecycleState state) {
        if (state == AppLifecycleState.resumed) {
            controller.setMapStyle("[]");
        }
    }
}

Solution 2:

Not a solution to the core problem, but I was able to work around this bug by creating a fork of the plugins project and modifying GoogleMapController.java as follows:

@OverridepublicvoidonActivityResumed(Activity activity) {
    if (disposed || activity.hashCode() != registrarActivityHashCode) {
      return;
    }
    mapView.onResume();
    // Workaround for https://github.com/flutter/flutter/issues/40284// This apparently forces a re-render of the map.if (googleMap != null) {
      googleMap.setMapType(googleMap.getMapType());
    }
  }

Now, on every resume event, the map will be re-rendered.

Solution 3:

When dealing with a stateful widget, put the code below in your code as shown below

classMainScreenStateextendsState<MainScreen> withWidgetsBindingObserver 
 {....


  @overridevoidinitState() {
     super.initState();
     WidgetsBinding.instance!.addObserver(this);
     ...    // Other codes here 
  }


  @overridevoiddidChangeAppLifecycleState(AppLifecycleState state) {
       if (state == AppLifecycleState.resumed) {
         mapController!.setMapStyle("[]");
       }
    }
 }

Then you can add the code below in the state widget

Solution 4:

I tried something & it seems to be working!

Step 01, Implement WidgetsBindingObserver for related class's State class as follows, i.e:

classMainScreenStateextendsState<MainScreen> withWidgetsBindingObserver {....

Step 02, Override didChangeAppLifecycleState method i.e:

@override
  Future<void> didChangeAppLifecycleState(AppLifecycleState state) async {
    super.didChangeAppLifecycleState(state);
    switch (state) {
      case AppLifecycleState.inactive:
        print('appLifeCycleState inactive');
        break;
      case AppLifecycleState.resumed:
        print('appLifeCycleState resumed');
        break;
      case AppLifecycleState.paused:
        print('appLifeCycleState paused');
        break;
      case AppLifecycleState.detached:
        print('appLifeCycleState detached');
        break;
    }
  }

Step 03 add this for init state

WidgetsBinding.instance!.addObserver(this);

Step 04 Step 4 should be as follows

//onMapCreated methodvoidonMapCreated(GoogleMapController controller) {
    controller.setMapStyle(Utils.mapStyles);
    _controller.complete(controller);
  }
// lifecycle@override
  Future<void> didChangeAppLifecycleState(AppLifecycleState state) async {
    super.didChangeAppLifecycleState(state);
    switch (state) {
      case AppLifecycleState.inactive:
        print('appLifeCycleState inactive');
        break;
      case AppLifecycleState.resumed:
        **//Add These lines**finalGoogleMapControllercontroller= await _controller.future;
        onMapCreated(controller);
        print('appLifeCycleState resumed');
        break;
      case AppLifecycleState.paused:
        print('appLifeCycleState paused');
        break;
      case AppLifecycleState.detached:
        print('appLifeCycleState detached');
        break;
    }
  }

Solution 5:

Another temporary fix that doesn't required forking the plugins, building, etc. Add a didChangeAppLifecycleState implemented via WidgetsBindingObserver to your Widget and make the GoogleMap widget rebuild with a state change.