[BUG] Slow loading and SocketExceptions for map tiles

[CvisionTeam]

What is the bug?

I am encountering issues with the Flutter flutter_map plugin when attempting to load tile images from Google Maps or OpenStreetMaps. Initially, the tile images load very slowly, and eventually, errors such as the following are raised:

═══════ Exception caught by image resource service ════════════════════════════ 
Connection closed before full header was received, uri=http://mt3.google.com/vt/lyrs=m&x=243&y=204&z=9&apistyle=s.t%3A17%7Cs.e%3Alg%7Cp.v%3Aoff

and

═══════ Exception caught by image resource service ════════════════════════════
The following _ClientSocketException was thrown resolving an image codec:
ClientException with SocketException: Connection attempt cancelled, host: mt3.google.com, port: 80, uri=http://mt3.google.com/vt/lyrs=m&x=15841&y=12906&z=15&apistyle=s.t%3A17%7Cs.e%3Alg%7Cp.v%3Aoff

When the exception was thrown, this was the stack:
#0      IOClient.send (package:http/src/io_client.dart:154:7)
io_client.dart:154
<asynchronous suspension>
#1      RetryClient.send (package:http/retry.dart:115:20)
retry.dart:115
<asynchronous suspension>
#2      BaseClient._sendUnstreamed (package:http/src/base_client.dart:93:32)
base_client.dart:93
<asynchronous suspension>
#3      BaseClient.readBytes (package:http/src/base_client.dart:58:22)
base_client.dart:58
<asynchronous suspension>
#4      FlutterMapNetworkImageProvider._loadAsync (package:flutter_map/src/layer/tile_layer/tile_provider/network_image_provider.dart:84:11)
network_image_provider.dart:84
<asynchronous suspension>
#5      MultiFrameImageStreamCompleter._handleCodecReady (package:flutter/src/painting/image_stream.dart:969:3)
image_stream.dart:969
<asynchronous suspension>

URL: http://mt3.google.com/vt/lyrs=m&x=15841&y=12906&z=15&apistyle=s.t%3A17|s.e%3Alg|p.v%3Aoff
Fallback URL: null
Current provider: FlutterMapNetworkImageProvider()
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by image resource service ════════════════════════════
ClientException with SocketException: Connection attempt cancelled, host: mt3.google.com, port: 80, uri=http://mt3.google.com/vt/lyrs=m&x=15840&y=12903&z=15&apistyle=s.t%3A17%7Cs.e%3Alg%7Cp.v%3Aoff
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by image resource service ════════════════════════════
ClientException with SocketException: Connection attempt cancelled, host: mt3.google.com, port: 80, uri=http://mt3.google.com/vt/lyrs=m&x=15841&y=12902&z=15&apistyle=s.t%3A17%7Cs.e%3Alg%7Cp.v%3Aoff
════════════════════════════════════════════════════════════════════════════════

These error started to rise after I updated to Flutter_map 6.1.0, Consequently upgraded the flutter, I have confirmed that my internet connection is stable, and I have set the necessary network permissions in AndroidManifest.xml for both debug and release modes.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Here is my flutter doctor output:

Doctor summary (to see all details, run flutter doctor -v): 
[√] Flutter (Channel stable, 3.16.9, on Microsoft Windows [Version 10.0.19045.3930], locale en-US) 
[√] Windows Version (Installed version of Windows is version 10 or higher) 
[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0) 
[√] Chrome - develop for the web 
[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2022 17.3.6) 
[√] Android Studio (version 2023.1) 
[√] VS Code (version 1.86.1) 
[√] Connected device (4 available) 
[√] Network resources

• No issues found!

I have tested this issue on both real devices (Android, iPhone) and simulators (Android, iPhone), and the problem persists across all platforms.

Here is the relevant part of the build function for the screen:

Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: [
        Container(
          color: Colors.white,
          child: FlutterMap(
            key: GlobalObjectKey("gmap"),
            mapController: mapController,
            options: mapOptions(),
            children: <Widget>[
              TileLayer(
                urlTemplate: 'http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&apistyle=s.t%3A17|s.e%3Alg|p.v%3Aoff',
                subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
              ),
              MarkerLayer(markers: markers),
            ],
          ),
        ), 
      ],
    ),
  );
}

Here are the relevent dependencies:

|-- flutter_map 6.1.0
|   |-- async 2.11.0
|   |   |-- collection...
|   |   '-- meta...      
|   |-- latlong2 0.9.0   
|   |   '-- intl...      
|   |-- logger 2.0.2+1   
|   |-- polylabel 1.0.1  
|   |   '-- collection...
|   |-- proj4dart 2.1.0  
|   |   |-- mgrs_dart 2.0.0
|   |   |   '-- unicode 0.3.1
|   |   |       '-- lists 1.0.1
|   |   |           '-- meta...
|   |   |-- wkt_parser 2.0.0
|   |   '-- meta...
|   |-- collection...
|   |-- flutter...
|   |-- http...
|   |-- meta...
|   '-- vector_math...
|-- flutter_map_marker_cluster 1.3.4
|   |-- flutter_map_marker_popup 6.1.2
|   |   |-- animated_stack_widget 0.0.4
|   |   |   '-- flutter...
|   |   |-- flutter...
|   |   |-- flutter_map...
|   |   |-- latlong2...
|   |   '-- provider...
|   |-- flutter...
|   |-- flutter_map...
|   '-- latlong2...
|-- http 1.2.0
|   |-- http_parser 4.0.2
|   |   |-- typed_data 1.3.2
|   |   |   '-- collection...
|   |   |-- collection...
|   |   |-- source_span...
|   |   '-- string_scanner...
|   |-- async...
|   |-- meta...
|   '-- web...
|-- http_client 1.5.3
|   |-- buffer 1.2.2
|   |-- executor 2.2.3
|   |   '-- stack_trace...
|   '-- http...
|-- intl 0.18.1
|   |-- clock 1.1.1
|   |-- path 1.8.3
|   '-- meta...

Any insights or suggestions on resolving this issue would be greatly appreciated. Thank you in advance for your assistance!

How can we reproduce it?

You can reproduce the error by updating flutter_map to 6.1.0 and flutter to latest release

Do you have a potential solution?

No response

Platforms

all platforms

Severity

Minimum: Allows normal functioning