How to create custom Marker for google maps in flutter with TextBox on top of icon

At first you need a class that will convert your marker image and then add text on top of the marker. You have to pass different marker size (like x1, x2, x3), you have to check your screen size and then pass the correct marker to the class below:

import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class MarkersWithLabel {
  static Future<Uint8List?> getBytesFromCanvasDynamic(
      {required String iconPath,
      required String plateReg,
      required double fontSize,
      required Size iconSize}) async {
    final Paint paint = Paint()
      ..color = const Color.fromARGB(255, 240, 200, 50);
    final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
    final Canvas canvas = Canvas(pictureRecorder);

    //The label code
    TextSpan span = TextSpan(
      style: TextStyle(
        fontSize: fontSize,
        color: Colors.black,
        letterSpacing: 1.0,
      ),
      text: plateReg.length > 15 ? plateReg.substring(0, 15) + '...' : plateReg,
    );

    TextPainter painter = TextPainter(
        text: span,
        textAlign: TextAlign.center,
        textDirection: ui.TextDirection.ltr);
    painter.text = TextSpan(
        text:
            plateReg.length > 15 ? plateReg.substring(0, 15) + '...' : plateReg,
        style: TextStyle(
            fontSize: fontSize,
            letterSpacing: 2,
            color: Colors.black,
            fontWeight: FontWeight.w600));

    painter.layout(
      minWidth: 0,
    );
    int halfTextHeight = painter.height ~/ 2;
    double fortyPercentWidth = painter.width * 0.20;
    int textWidth = painter.width.toInt() + fortyPercentWidth.toInt();
    int textHeight = painter.height.toInt() + halfTextHeight;

    // Text box rectangle for Vehicle registration label
    Rect rect =
        Rect.fromLTWH(0, 0, textWidth.toDouble(), textHeight.toDouble());
    RRect rectRadius = RRect.fromRectAndRadius(rect, const Radius.circular(10));

    canvas.drawRRect(rectRadius, paint);
    painter.paint(
        canvas, Offset(fortyPercentWidth / 2, halfTextHeight.toDouble() / 2));

    double x = (textWidth) / 2;
    double y = textHeight.toDouble();

    Path arrow = Path()
      ..moveTo(x - 25, y)
      ..relativeLineTo(50, 0)
      ..relativeLineTo(-25, 25)
      ..close();

    // Draw an arrow under the Text Box Label
    canvas.drawPath(arrow, paint);

    // Load the icon from the path as a list of bytes
    final ByteData dataStart = await rootBundle.load(iconPath);

    // Resize the icon to a smaller size. If the icons by default have a huge size will be crazy big on the screen.
    // I discovered in my case that the best iconSize for a custom marker is width = 75 and height = 100.
    ui.Codec codec = await ui.instantiateImageCodec(
        dataStart.buffer.asUint8List(),
        targetWidth: iconSize.width.toInt());
    ui.FrameInfo fi = await codec.getNextFrame();

    Uint8List dataEnd =
        ((await fi.image.toByteData(format: ui.ImageByteFormat.png)) ??
                ByteData(0))
            .buffer
            .asUint8List();

    ui.Image image = await _loadImage(Uint8List.view(dataEnd.buffer));

    //Move the icon from left to right or up to down
    canvas.drawImage(image, Offset(x - (image.width / 2), y + 25), Paint());

    ui.Picture p = pictureRecorder.endRecording();

    //This sets the total height of the icon along with the text
    ByteData? pngBytes = await (await p.toImage(
      textWidth < image.width ? image.width : textWidth,
      textHeight + image.height + 25,
    ))
        .toByteData(format: ui.ImageByteFormat.png);

    return pngBytes?.buffer.asUint8List();
  }

  static Future<ui.Image> _loadImage(Uint8List img) async {
    final Completer<ui.Image> completer = Completer();
    ui.decodeImageFromList(img, (ui.Image img) {
      return completer.complete(img);
    });
    return completer.future;
  }
}

Then call this class from anywhere in your app and set it to your icon variable.

final Uint8List? icon = await MarkersWithLabel.getBytesFromCanvasDynamic(
        returnImageUrl(), pointsData.name!, returnFontSize());

My returnImageUrl() and returnFontSize() functions just calculates my screen size and returns a pre defined image (like 1x, 2x) url from assets and fontSize. It helps my marker look symmetric for different screen sizes.

Then just pass your icon to Map marker:

MarkerId markerId = MarkerId('1');
    return Marker(
        markerId: markerId,
        position: LatLng(myLat, myLong),
        icon: BitmapDescriptor.fromBytes(icon!));

I tried to make the marker as dynamic as possible. Play around with the MarkersWithLabel class to find your desired result. Check the screenshot for final result.

Code to resize the icon was added otherwise the icons was huge on the map like in the photo below:

The code was improved because in some cases the markers was cropped like in the photo below:

At the end the markers will look like this (for iconSize I’ve used width = 75 and height = 100).
Photo below: