Flutter_map ClientException with SocketException

Question

I'm adding the "flutter_map" package to display OpenStreetMap on Android and iOS. It's working when I call mapcontroller.move, but I get an exception when zooming with finger gestures on iOS.

Here is the exception: flutter: ClientException with SocketException: Connection failed (OS Error: Too many open files, errno = 24), address = tile.openstreetmap.org, port = 443, uri=https://tile.openstreetmap.org/10/546/350.png dnssd_clientstub deliver_request: socketpair failed 24 (Too many open files)

Here is my flutter code

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {

  // Create map controller
  final MapController _mapController = MapController();

  LatLng currentPosition =  const LatLng(52.5200, 13.4050);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true, 
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          // cuurrent location button
          SizedBox(
            height: 50.0,
            width: 50.0,
            child: FittedBox(
              child: FloatingActionButton(
                heroTag: "getCurrentLocation_bnb",
                backgroundColor: Colors.white,
                child: const Icon(
                  Icons.my_location,
                  color: Colors.black,
                ),
                onPressed: () {
                  setState(() {
                    _mapController.move(currentPosition, 17);           
                  });
                },
              ),
            ),
          ),
          ],),
          // Scaffold body
          body:   FlutterMap(
          mapController: _mapController,
          options: MapOptions(  
              initialCenter: currentPosition,
              initialZoom: 5,
              maxZoom: 18,
              minZoom: 5,
             
          ),
          // layers of map
          children: <Widget>[
           TileLayer(
            urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
           ),
          ])           
        );
  }

Answer 1

I solved it with adding a CachedNetworkTileProvider:

TileLayer(
  urlTemplate:'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
  tileProvider: CachedNetworkTileProvider(),
),