flutter_map 6.1.0 Grey Screen Issue

As of today, February 26, 2024, if you’re using Flutter Map and you see a grey screen instead of the map, you’re not alone. Many users have encountered this issue. Here’s what the grey screen might look like:

you will get message like this on debug.

  I/flutter (26138): ClientException: Connection closed while receiving data, uri=https://tile.openstreetmap.org/17/38602/49249.png
  I/flutter (26138): ClientException: Connection closed before full header was received, uri=https://tile.openstreetmap.org/17/38598/49247.png

Flutter Doctor Summary

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.0, on macOS 14.4 23E5196e darwin-arm64, locale en-PK)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.86.2)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!

Possible Cause of this error

1. You have VPN network Connection.
2. Slow Internet Connection.

How to reproduce this Error.

 FlutterMap(
        mapController: _mapController,
        options: MapOptions(
                 initialZoom: 17.3,
            ),              
        // Interactive and compliant map
        children: <Widget>[
         RichAttributionWidget(
        attributions: <SourceAttribution>[
          TileLayer(
            urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
            userAgentPackageName: 'dev.fleaflet.flutter_map.example',
            // Plenty of other options available!
            ),
          TextSourceAttribution(
            'OpenStreetMap contributors',
            onTap: () {
              launchUrl(
                Uri.parse(
                 'https://openstreetmap.org/copyright',
                ),
              );
            },
          ),
        ],
      ),
    ],
  ),

Output

When will this error trigger

1. Using Initial LatLong and initital Zoom in MapOption().
2. Moving Camera position using MapController when map is Ready i-e Call onMapReady function and move camera view .
3. If you have Active VPN connection then it will also throws network Connection Exception and cause grey screens.

Solution:

1. Manually Zoom and Zoom out will render Map
2. Not using Initial Zoom and InitialLatLong will render map fine.
3. Override your flutter Map will fix map Rendering issue.

How do i override package?

There are many great article about overriding flutter package, However , here i will explain in simple and easy step to fix this issue temporarily.

1. Download or Clone Git repo of Flutter_Map.
2. Inside your flutter project , Create A folder with name dependency_overrides in your project root directory . if you already have this folder , then ignore this step.
3. Move your downloaded repo folder inside dependency_overrides folder.
4. Go to your project pubspec.yaml file and add reference to depency_override like this.

dependency_overrides:
  # Flutter Map test
  flutter_map:
    # https://pub.dev/packages/flutter_map/changelog
    path: dependency_overrides/flutter_map

5. Now do flutter pub get in your terminal and run your project.

6. Your Project should work fine

you should get a map view like this

How Dependency Override is Working But Published Version is not Working ?

The release of Flutter_map version 6.0.01 on October 24, 2024, unfortunately, did not resolve the grey screen issue many of us were experiencing. ⁠We ran into a roadblock, but fortunately we found a solution in a GitHub discussion (https://github.com/fleaflet/flutter_map/issues/1698) that shed light on a potential solution. After locally testing the package and confirming that a particular merge worked for us, we were inspired to share our findings in this article. We understand the frustration this issue may cause, but we’re hopeful that our solution will provide relief until the next public release of the Flutter_map package.

How Can we see Map solution that worked for you ?

You can see the map solution that worked for us in action by downloading our Smart Contact app called Saropa. Check out the map we’ve implemented in the app to see how we resolved the issue.

Summary:

In this article, we explore a common issue with Flutter Map where the map displays a grey screen instead of the actual map tiles. This problem is often related to a VPN connection or slow internet. We provide practical solutions, including manually zooming, avoiding initial zoom and latitude/longitude settings, and overriding the Flutter Map package. Follow the simple steps outlined to override the package and ensure correct map rendering in your Flutter project.

Keep an eye out for future releases of Flutter Map, as the team behind this amazing package is continuously working to improve its features and address any issues. A big thank you to the Flutter Map team for providing such an incredible tool for free, making it accessible to developers around the world. Their dedication to the open-source community is truly commendable, and we look forward to seeing the advancements they bring to this essential package in the upcoming updates.