How to create text inside marker with google_maps_flutter?
3,232
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
);
Author by
Guilherme A. V. Dos Santos
Updated on December 14, 2022Comments
-
Guilherme A. V. Dos Santos over 1 year
I need to create a map marker like this in this example:
https://i.stack.imgur.com/W6oqG.jpg
Would anyone know how to do this?