3

How to implement a marker on Google Maps flutter with text on the marker. Image for reference:

https://i.stack.imgur.com/W6oqG.jpg

Nirmal Scaria
  • 318
  • 3
  • 6
Guilherme A. V. Dos Santos
  • 193
  • 1
  • 10

2 Answers2

11

I managed to solve with this method

Future<BitmapDescriptor> createCustomMarkerBitmap(String title) async {
        TextSpan span = new TextSpan(
          style: new TextStyle(
            color: Prefs.singleton().getTheme() == 'Dark'
                ? Colors.white
                : Colors.black,
            fontSize: 35.0,
            fontWeight: FontWeight.bold,
          ),
          text: title,
        );
    
        TextPainter tp = new TextPainter(
          text: span,
          textAlign: TextAlign.center,
          textDirection: TextDirection.ltr,
        );
        tp.text = TextSpan(
        text: title.toStringAsFixed(0),
        style: TextStyle(
          fontSize: 35.0,
          color: Theme.of(context).accentColor,
          letterSpacing: 1.0,
          fontFamily: 'Roboto Bold',
         ),
        );
    
        PictureRecorder recorder = new PictureRecorder();
        Canvas c = new Canvas(recorder);
    
        tp.layout();
        tp.paint(c, new Offset(20.0, 10.0));
    
        /* Do your painting of the custom icon here, including drawing text, shapes, etc. */
    
        Picture p = recorder.endRecording();
        ByteData pngBytes =
            await (await p.toImage(tp.width.toInt() + 40, tp.height.toInt() + 20))
                .toByteData(format: ImageByteFormat.png);
    
        Uint8List data = Uint8List.view(pngBytes.buffer);
    
        return BitmapDescriptor.fromBytes(data);
      }

how to use:

BitmapDescriptor bitmapDescriptor = await createCustomMarkerBitmap(...);

Marker marker = Marker(
  /*  in addition to your other properties: */
  icon: bitmapDescriptor
);
Guilherme A. V. Dos Santos
  • 193
  • 1
  • 10
  • Thanks for the solution! Do you know how to add background color for the text? – kashlo Jul 21 '20 at 08:09
  • Hi, it was a pleasure. To add the background color of the text you need to create a TextSpan. <-- TextPainter painter = new TextPainter( textDirection: TextDirection.ltr, ); painter.text = TextSpan( text: title.toStringAsFixed(0), style: TextStyle( fontSize: 35.0, color: Theme.of(context).accentColor, letterSpacing: 1.0, fontFamily: 'Roboto Bold', ), );--> – Guilherme A. V. Dos Santos Jul 21 '20 at 12:16
  • This should be marked as the correct answer, thank you! – Vincent Gagnon Nov 18 '20 at 11:33
  • @GuilhermeAlvesVieira Please can you tell me, how can I use a custom icon here? – FGH Nov 29 '20 at 18:09
  • @Prasath I did not understand your question – Guilherme A. V. Dos Santos Dec 01 '20 at 14:09
  • @GuilhermeA.V.DosSantos I have one icon image(png), I want to get the text inside that icon. Please can you post the answer ? – FGH Dec 01 '20 at 14:32
  • 1
    @Prasath My post here is to create an icon with customized text. Now what you want is to get the text that is inside an image (png) what do I understand? you can use a lib to do this: - https://pub.dev/packages/firebase_ml_vision – Guilherme A. V. Dos Santos Dec 01 '20 at 19:39
0

You can either do it manually using Canvas and Painter. Or you could use this package which does the exact same thing asked in the question.

https://pub.dev/packages/label_marker

Just go through the overview once and you can see if it is for you or not. I really hope it helps. And yeah. I made it :)

Nirmal Scaria
  • 318
  • 3
  • 6