Marker from Svg in Google Maps is not showing the Image from url

Question

I have these markers in google maps

I am generating them from an svg with an <image> that has a network image.

The problem is, the markers image that should be inside is not being displayed.

Here's the code that I use to generate the marker:

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart' show BitmapDescriptor;
import 'dart:ui' as ui;

Future<BitmapDescriptor> getAssetImageMarker(String networkImage) async {
  Size size = const Size(30, 30);
  String svgString = '''
    <svg width="100" height="100" >
      <defs>
        <pattern id="image-pattern" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse" >
          <image href="https://images.unsplash.com/photo-1608848461950-0fe51dfc41cb" x="0" y="0" width="100" height="120" />
        </pattern>
      </defs>
      <circle cx="50" cy="50" r="40" stroke="orange" stroke-width="4" fill="url(#image-pattern)" />
    </svg>
''';

  final svgDrawableRoot = await svg.fromSvgString(svgString, 'debug: ${svgString.codeUnits}');

  final ratio = ui.window.devicePixelRatio.ceil();
  final width = size.width.ceil() * ratio;
  final height = size.height.ceil() * ratio;
  final picture = svgDrawableRoot.toPicture(
    size: Size(
      width.toDouble(),
      height.toDouble(),
    ),
  );
  final image = await picture.toImage(width, height);
  final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
  final uInt8List = byteData!.buffer.asUint8List();
  return BitmapDescriptor.fromBytes(uInt8List);
}

Is there something I am doing wrong? I tried canvas approach but this is how I got it working first.

I hope you can help me. Thanks in advance.

Marker from Svg in Google Maps is not showing the Image from url

0 Answers0