I have a flutter application and I added the library flutter_map to add an OpenStreetMap map in the application.

This is my code to add the map:

  Widget build(BuildContext context) {
return Scaffold(
  body: Stack(
    children: <Widget>[
      FlutterMap(
        options: MapOptions(
          onPositionChanged: (position, hasGesture) =>
              _handleOnPositionChanged(position, hasGesture, context),
          center: center,
          zoom: zoom,
          onTap: (location) {
            print(location);
          },
        ),
        layers: [
          TileLayerOptions(
            urlTemplate:
                'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png',
            subdomains: ['a', 'b', 'c'],
            keepBuffer: 6,
            backgroundColor: Colors.white,
            tileSize: 256,
            cachedTiles: true,
          ),
          new MarkerLayerOptions(markers: getListOfMarkers()),
        ],
      )
    ],
  )
);
}

But in the application, when we zoom or move in the map, the loading take some time and so a blank space is displayed on the entire map or just in some places.

Do you know how I can do to avoid these blank spaces ?

Edit

I tested with many tiles servers and it's always the same. But with google maps and the map_view library, I don't have this problem...


Solution 1: Sebastian Smolorz

This is a limitation of the library at the moment. https://github.com/johnpryan/flutter_map/issues/79