How to create text inside marker with google_maps_flutter? [closed]
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);