How to set a text as Marker in Google Maps

Issue

Hey I am trying to display a text in the map. Therefore I use textpainter to ‘draw’ the given String and add it as marker. Now there is my problem: I know that the icon for the marker should be a BitmapDescriptor, but I dont know how to convert the returned ‘picture’ of the textpainter into a BitmapDescriptor.

  class MapAction extends StatefulWidget {

  MapAction({Key key, this.inputText}) : super(key: key);
  final String inputText;

  @override
  _MapActionState createState() => _MapActionState();
}

class _MapActionState extends State<MapAction> {
  Set<Circle> _circles = Set();
  Set<Marker> _marker = Set();

  int counter1 = 0;
  int counter2 = 0;
    
  void setMarker(LatLng position) async {
    counter2++;

    Marker tmp = Marker(
      //icon: How can I set my "inputText" as Marker
      markerId: MarkerId("$counter2"), 
      position: position);
    setState(() {
      _marker.add(tmp);
    });
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<Position>(
        stream: GeolocatorService().getCurrentLocation(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Container(
                height: MediaQuery.of(context).size.height / 2,
                width: MediaQuery.of(context).size.width,
                child: CircularProgressIndicator());
          } else {
            return Container(
                height: MediaQuery.of(context).size.height / 2,
                width: MediaQuery.of(context).size.width,
                child: GoogleMap(
                  markers: _marker,
                  initialCameraPosition: CameraPosition(
                      target: LatLng(
                          snapshot.data.latitude, snapshot.data.longitude),
                      zoom: 16.0),
                  zoomControlsEnabled: false,
                  //mapType: MapType.satellite,
                  myLocationButtonEnabled: true,
                  myLocationEnabled: true,
                ));
          }
        });
  }
}



class MyPainter extends CustomPainter {

  MyPainter({this.inputText});
  final String inputText;

  @override
  void paint(Canvas canvas, Size size) {
    final textStyle = TextStyle(
      color: Colors.black,
      fontSize: 30,
    );
    final textSpan = TextSpan(
      text: inputText,
      style: textStyle,
    );
    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
    );
    textPainter.layout(
      minWidth: 0,
      maxWidth: size.width,
    );
    final xCenter = (size.width - textPainter.width) / 2;
    final yCenter = (size.height - textPainter.height) / 2;
    final offset = Offset(xCenter, yCenter);
    textPainter.paint(canvas, offset);
  }

  @override
  bool shouldRepaint(CustomPainter old) {
    return false;
  }
}

I do know that I can display the drawn text with:

 CustomPaint(size: Size(300, 300),
   painter: MyPainter(inputText: inputText),
 ),

So is there a method or something like that to convert this CustomPaint-Widget to a BitmapDescriptor?

Solution

try to use PictureRecorder to output Image:

ui.PictureRecorder recorder = ui.PictureRecorder();
MyPainter painter = MyPainter(inputText: 'blablabla');
return recorder.endRecording()
    .toImage(painter.size.width.floor(), painter.size.height.floor());

and then change to byte for google map image display:

var pngBytes = await image.toByteData(format: ui.ImageByteFormat.png)

Answered By – Jim

Answer Checked By – Marie Seifert (FlutterFixes Admin)