[google_maps_flutter] Can't display GroundOverlay on iOS when the image is loaded from the network as 'BytesMapBitmap' (works on Web and Android)

[Errechydy]

Steps to reproduce

• Run the simple code example bellow

Expected results

Display the ground overlay on the map

Actual results

No exception or error but doesn't display the ground overlay

Code sample

Code sample

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// ignore_for_file: public_member_api_docs

import 'dart:typed_data';
import 'dart:io';
import 'package:path_provider/path_provider.dart';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:http/http.dart' as http;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple)),
      home: const GroundOverlayBody(),
    );
  }
}

class GroundOverlayBody extends StatefulWidget {
  const GroundOverlayBody({super.key});

  @override
  State<StatefulWidget> createState() => GroundOverlayBodyState();
}

class GroundOverlayBodyState extends State<GroundOverlayBody> {
  GroundOverlayBodyState();

  GoogleMapController? controller;
  GroundOverlay? _groundOverlay;

  void _onMapCreated(GoogleMapController controller) {
    this.controller = controller;
  }

  void _removeGroundOverlay() {
    setState(() {
      _groundOverlay = null;
    });
  }

  Future<void> _addGroundOverlay() async {
    final imageUrl = 'https://picsum.photos/200/300';
    final assetMapBitmap = await _getNetworkBitmap(imageUrl);

    try {
      final GroundOverlay groundOverlay = GroundOverlay.fromBounds(
        groundOverlayId: GroundOverlayId('ground_overlay'),
        image: assetMapBitmap,
        bounds: LatLngBounds(southwest: const LatLng(37.41, -122.09), northeast: const LatLng(37.423, -122.07)),
        onTap: () {},
      );
      setState(() {
        _groundOverlay = groundOverlay;
      });
    } catch (e) {
      print(e);
    }
  }

  Future<BytesMapBitmap> _getNetworkBitmap(String url) async {
    final response = await http.get(Uri.parse(url));
    if (response.statusCode == 200) {
      final Uint8List bytes = response.bodyBytes;
      BytesMapBitmap bytesMapBitmap = BytesMapBitmap(bytes, bitmapScaling: MapBitmapScaling.none);
      return bytesMapBitmap;
    } else {
      throw Exception('Failed to load image from network');
    }
  }

  @override
  Widget build(BuildContext context) {
    final Set<GroundOverlay> overlays = <GroundOverlay>{if (_groundOverlay != null) _groundOverlay!};
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          child: GoogleMap(
            initialCameraPosition: CameraPosition(target: LatLng(37.422026, -122.085329), zoom: 14.0),
            groundOverlays: overlays,
            onMapCreated: _onMapCreated,
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            TextButton(onPressed: _groundOverlay == null ? _addGroundOverlay : null, child: const Text('Add')),
            TextButton(onPressed: _groundOverlay != null ? _removeGroundOverlay : null, child: const Text('Remove')),
          ],
        ),
      ],
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.29.2, on macOS 15.1 24B83 darwin-arm64, locale
    en-MA)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.2)
[✓] VS Code (version 1.98.2)
[✓] Connected device (4 available)
[✓] Network resources

• No issues found!

[darshankawar]

@Errechydy
Thanks for the report. I tried the code sample with latest master version and ran on iOS simulator which displayed the image after tapping on add button:

In your case, after tapping add button, you don't see image rendering ?

Channel master, 3.31.0-1.0.pre.135`

Also see flutter/packages#8432

[Errechydy]

@darshankawar Thanks, you're right, it seems like the Flutter stable version has this bug but then somehow got fixed, i upgraded to Channel master, 3.31.0-1.0.pre.135 and it worked.

While playing around with it i found another bug :), i don't know if this was intended or not but it works only if the size of the image is less than 1024, if any of the dimensions the width or height is above 1024 by only one pixel it won't display the image on the map.

To test this case ou can change the image link in the example code above:
from final imageUrl = 'https://picsum.photos/200/300';
to final imageUrl = 'https://picsum.photos/1025/300';

[darshankawar]

I'll close this as fixed in master. For other bug you noticed, please file new issue for better tracking.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.