[google_maps_flutter_web] AdvancedMarker with BitmapDescriptor.bytes flickers during position updates #188291

import 'dart:async';
import 'dart:math' as math;
import 'dart:typed_data';
import 'dart:ui' as ui;

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

void main() {
  runApp(const MaterialApp(home: AdvancedMarkerBytesFlickerRepro()));
}

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

  @override
  State<AdvancedMarkerBytesFlickerRepro> createState() =>
      _AdvancedMarkerBytesFlickerReproState();
}

class _AdvancedMarkerBytesFlickerReproState
    extends State<AdvancedMarkerBytesFlickerRepro> {
  static const LatLng _center = LatLng(-33.852, 151.211);
  static const String _mapId = 'DEMO_MAP_ID';

  BitmapDescriptor? _bytesIcon;
  Timer? _timer;
  int _tick = 0;

  final BitmapDescriptor _pinIcon = BitmapDescriptor.pinConfig(
    backgroundColor: Colors.blue,
    borderColor: Colors.blue,
    glyph: const TextGlyph(text: 'PIN', textColor: Colors.white),
  );

  @override
  void initState() {
    super.initState();
    _createBytesIcon().then((BitmapDescriptor icon) {
      if (!mounted) {
        return;
      }
      setState(() {
        _bytesIcon = icon;
      });

      _timer = Timer.periodic(const Duration(milliseconds: 80), (_) {
        setState(() {
          _tick++;
        });
      });
    });
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  Set<AdvancedMarker> _markers() {
    final BitmapDescriptor? bytesIcon = _bytesIcon;
    if (bytesIcon == null) {
      return <AdvancedMarker>{};
    }

    final double phase = _tick / 8.0;
    final double latOffset = math.sin(phase) * 0.0015;

    return <AdvancedMarker>{
      AdvancedMarker(
        markerId: const MarkerId('bytes-marker'),
        position: LatLng(_center.latitude + latOffset, _center.longitude - 0.003),
        icon: bytesIcon,
      ),
      AdvancedMarker(
        markerId: const MarkerId('pin-marker'),
        position: LatLng(_center.latitude + latOffset, _center.longitude + 0.003),
        icon: _pinIcon,
      ),
    };
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        mapId: _mapId,
        markerType: GoogleMapMarkerType.advancedMarker,
        initialCameraPosition: const CameraPosition(target: _center, zoom: 16),
        markers: _markers(),
      ),
    );
  }

  Future<BitmapDescriptor> _createBytesIcon() async {
    final Uint8List bytes = await _createPngBytes('BYTES');
    return BitmapDescriptor.bytes(bytes, width: 96, height: 42);
  }

  Future<Uint8List> _createPngBytes(String text) async {
    const double width = 192;
    const double height = 84;

    final ui.PictureRecorder recorder = ui.PictureRecorder();
    final Canvas canvas = Canvas(recorder);

    final Paint fill = Paint()..color = Colors.red;
    canvas.drawRRect(
      RRect.fromRectAndRadius(
        const Rect.fromLTWH(0, 0, width, height),
        const Radius.circular(18),
      ),
      fill,
    );

    final TextPainter painter = TextPainter(
      text: TextSpan(
        text: text,
        style: const TextStyle(
          color: Colors.white,
          fontSize: 34,
          fontWeight: FontWeight.bold,
        ),
      ),
      textDirection: TextDirection.ltr,
    )..layout(maxWidth: width);

    painter.paint(
      canvas,
      Offset((width - painter.width) / 2, (height - painter.height) / 2),
    );

    final ui.Image image = await recorder.endRecording().toImage(
      width.toInt(),
      height.toInt(),
    );
    final ByteData? byteData = await image.toByteData(
      format: ui.ImageByteFormat.png,
    );

    return byteData!.buffer.asUint8List();
  }
}