How to dispose Flutter google map’s controller the right way?

When you app needs a google map integration the common package you must have been using must be google_maps_flutter. But many of you don’t know the right way to dispose the Flutter google map’s controller which can lead to crashing the mobile app. In this article, we will discuss the right way to dispose Flutter google map’s controller the right way.

The Common Problem

When reloading the map or navigating back to the map from another view, you might encounter the following error:

Exception has occurred.
PlatformException (PlatformException(error, java.lang.IllegalStateException: Trying to create an already created platform view, view id: 0
    at io.flutter.plugin.platform.PlatformViewsController$1.createPlatformView(PlatformViewsController.java:85)
    at io.flutter.embedding.engine.systemchannels.PlatformViewsChannel$1.create(PlatformViewsChannel.java:96)

This problem usually arises because the controller is not disposed of correctly. A common approach to disposing of the controller involves the following code snippet:

@override
  void dispose() {
    _disposeController();
    super.dispose();
  }

  Future<void> _disposeController() async{
    final GoogleMapController controller = await _controller.future;
    controller.dispose();
  }

However, this code leads to an error:

The method 'dispose' isn't defined for the class 'GoogleMapController'.
Try correcting the name to the name of an existing method, or defining a method named 'dispose'.

The error occurs because the dispose method is not defined for GoogleMapController. This is due to changes in the package’s functions and implementations.

The Correct Solution

To properly dispose of the Google Maps controller, you should wait for the controller’s future to complete and then call the dispose method. Here’s the correct way to handle it:

_controller.future.then((ctlrer) => ctlrer.dispose());

This code ensures that the controller is disposed of properly and prevents the errors that occur when switching pages or returning to the map view.

Step-by-Step Implementation

Here is a step-by-step guide to implementing the correct disposal method in your Flutter application:

1. Initialize the Flutter google map’s Controller:

Ensure that you have initialized the Google Maps controller properly:

Completer<GoogleMapController> _controller = Completer();

2. Use the Controller in Your Map Widget:

Set up the Google Map widget and pass the controller to it:

GoogleMap(
  onMapCreated: (GoogleMapController controller) {
    _controller.complete(controller);
  },
  initialCameraPosition: CameraPosition(
    target: LatLng(37.77483, -122.41942),
    zoom: 14,
  ),
);

3. Dispose of the Controller Correctly:

Implement the disposal method in your State class:

@override
void dispose() {
  _controller.future.then((controller) => controller.dispose());
  super.dispose();
}

Conclusion

In this tutorial, we discussed the correct way to dispose of the Flutter google map’s controller. Many developers face issues due to improper disposal, leading to memory leaks and method-not-found errors. By using the then method on the future of the controller, you can ensure that the controller is disposed of properly. This approach helps prevent crashes when switching pages or returning to the map view.

We hope this guide helps you manage the Flutter google map’s controller effectively in your Flutter applications. If you have any questions or need further assistance, feel free to comment below. We are always happy to help.

Wanna Level up Your Flutter game? Then check out our ebook The Complete Guide to Flutter Developement where we teach you how to build production grade cross platform apps from scratch.Do check it out to completely Master Flutter framework from basic to advanced level.

Further Reading

How to change textfield icon color when selected

How to create hyperlink widget in flutter in 4 ways?

For more insightful articles, follow our page. Each article is crafted with love by our team.