add number within custom marker in google map at flutter?

Issue

I want to add number within my custom marker in google map at flutter development. I have shared my complete source below. so please help me, how to modify my source for solving my problem. thanks my dependencies:

custom_marker_icon: ^0.2.0  


import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:custom_marker_icon/custom_marker_icon.dart';


class FlutterAnimarkerExample extends StatefulWidget {
  @override
  _FlutterAnimarkerExampleState createState() =>
      _FlutterAnimarkerExampleState();
}

class _FlutterAnimarkerExampleState extends State<FlutterAnimarkerExample> {
  final LatLng _latLng = LatLng(28.7041, 77.1025);
  final double _zoom = 15.0;

  Set<Marker> _markers = {};

  void _addMarkers() async {
    BitmapDescriptor markerIcon = await CustomMarkerIcon.fromIcon(
      Icons.circle,
      Colors.blue,
      100,
    );
    setState(() {
      _markers.add(
        Marker(
          markerId: MarkerId("marker_id"),
          position: _latLng,
          icon: markerIcon,
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Marker Icon Example'),
        backgroundColor: Colors.red,
      ),
      body: GoogleMap(
        onMapCreated: (GoogleMapController controller) {
          _addMarkers();
        },
        markers: _markers,
        initialCameraPosition: CameraPosition(
          target: _latLng,
          zoom: _zoom,
        ),
      ),
    );
  }
}

now output:
but i want to output like below image:

how to modify my code?

Solution

Try this instead of custom_marker_icon

 import 'dart:ui' as ui;

 Future<Uint8List> getBytesFromCanvas(int customNum, int width, int height) async  {
 final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
 final Canvas canvas = Canvas(pictureRecorder);
 final Paint paint = Paint()..color = Colors.blue;
 final Radius radius = Radius.circular(width/2);
 canvas.drawRRect(
     RRect.fromRectAndCorners(
       Rect.fromLTWH(0.0, 0.0, width.toDouble(),  height.toDouble()),
       topLeft: radius,
       topRight: radius,
       bottomLeft: radius,
       bottomRight: radius,
     ),
     paint);

 TextPainter painter = TextPainter(textDirection: TextDirection.ltr);
 painter.text = TextSpan(
   text: customNum.toString(), // your custom number here
   style: TextStyle(fontSize: 65.0, color: Colors.white),
 );

 painter.layout();
 painter.paint(
     canvas,
     Offset((width * 0.5) - painter.width * 0.5,
         (height * .5) - painter.height * 0.5));
 final img = await pictureRecorder.endRecording().toImage(width, height);
 final data = await img.toByteData(format: ui.ImageByteFormat.png);
 return data.buffer.asUint8List();
 }

to create your Icon

Uint8List markerIcon = await getBytesFromCanvas(1, 150, 150);

And set your icon

icon: BitmapDescriptor.fromBytes(markerIcon),

Answered By - Dat Tran