Place a custom text under Marker _icon in Flutter Google Maps Plugin

Issue

I'm trying to add some text to a custom marker (I'm using google maps flutter)

var cluster =  Marker(
                markerId: MarkerId( uuid.v1() ),
                position: new LatLng(clusterMap[box].latitude,clusterMap[box].longitude ),
                icon: _clusterImage,
                alpha: 0.5);

What can I do is only to change the Icon, now the icon is a circle with a grey background. I want to add some text in this circle. There is a way to do that?

Solution

You need to use canvas to write on marker. This function writes on the marker. After adding those lines to your class, go down below.

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

....... .......
Future<Uint8List> getBytesFromCanvas(String text) async {

    final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
    final Canvas canvas = Canvas(pictureRecorder);
    final Paint paint1 = Paint()..color = Colors.grey;
    final int size = 100; //change this according to your app
    canvas.drawCircle(Offset(size / 2, size / 2), size / 2.0, paint1);
    TextPainter painter = TextPainter(textDirection: TextDirection.ltr);
    painter.text = TextSpan(
      text: text,//you can write your own text here or take from parameter
      style: TextStyle(
          fontSize: size / 4, color: Colors.black, fontWeight: FontWeight.bold),
    );
    painter.layout();
    painter.paint(
      canvas,
      Offset(size / 2 - painter.width / 2, size / 2 - painter.height / 2),
    );

    final img = await pictureRecorder.endRecording().toImage(size, size);
    final data = await img.toByteData(format: ui.ImageByteFormat.png);
    return data.buffer.asUint8List();
  }

Now, you can easily call marker that you desired with following.

final Uint8List desiredMarker =
      await getBytesFromCanvas('Write What You want!!');

      var cluster =  Marker(
                markerId: MarkerId( uuid.v1() ),
                position: new LatLng(clusterMap[box].latitude,clusterMap[box].longitude ),
                icon: BitmapDescriptor.fromBytes(desiredMarker),
                alpha: 0.5);

I hope this is helpful. Take care.

Answered By - Ümitcan Hasbioğlu