how to draw some markers and make it different each other (flutter google map)

Question

i have tried this to customize marker on flutter_google_maps and this to change widget into bytes, since we could change marker using bytes, not widget.

i actually solve the problem if i use only one type of marker like this:

but things are different where the requirement design just like this:

so how do i solve the problem?

here some code i use, but the result output is first image above, not as expected.

-> method to change widget into image

import 'dart:ui' as ui;
GlobalKey<ScaffoldState> keyScaffold = new GlobalKey<ScaffoldState>();

Future<Uint8List> _capturePng() async {
    try {
      RenderRepaintBoundary boundary =
      keyScaffold.currentContext.findRenderObject();
      ui.Image image = await boundary.toImage(pixelRatio: 3.0);
      ByteData byteData =
      await image.toByteData(format: ui.ImageByteFormat.png);
      Uint8List pngBytes = byteData.buffer.asUint8List();
      return pngBytes;
    } catch (e) {
      print(e);
    }
  }

bool rendering = true;
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Peta'),
      ),
      body: rendering
          ? renderWidgetToImage()
          : renderGoogleMap()
);

-> method to render widget before converted

String title;
  Widget renderWidgetToImage() {
    return RepaintBoundary(
      key: keyScaffold,
      child: Container(
          margin: EdgeInsets.only(top: 30, left: 10, right: 10, bottom: 20),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black),
            color: Colors.green,
          ),
          child: Text(
            title,
            style: TextStyle(
              fontSize: 10
            ),
          )),
    );
  }

-> method to programmatically add marker using widget

final Set<Marker> _markers = {};

@override
void initState() {
   super.initState();
   var arrMarker = <MarkerMap>[
      MarkerMap("Text Widget 3","123",3.59196,98.672226),
      MarkerMap("Text Widget 2","456",3.49196,97.572226),
      MarkerMap("Text Widget 1","789",3.39196,97.772226),
    ];
    for(int i =0; i< arrMarker.length; i++) {
      setState(() {
        this.title = arrMarker[i].title;
      });
 BitmapDescriptor.fromAssetImage(
          ImageConfiguration(size: Size(48, 48)), DefaultImageLocation.iconAnalog)
          .then((onValue) async {
        var png = await _capturePng(keyScaffold);
        setState(() {
          this.myIcon = BitmapDescriptor.fromBytes(png);
          this.rendering = false;
        });
        setState(() {
          _markers.add(
            Marker(
                markerId: MarkerId(arrMarker[i].id),
                position: LatLng(arrMarker[i].pos1, arrMarker[i].pos2),
                icon: BitmapDescriptor.fromBytes(png),
            ),
          );

        });
 });
      setState(() {
        this.rendering = true;
      });
}

any help would be appreciated, thank you

Answer 1

Currently, this is now possible using the steps provided in this blog.

As mentioned in the intro:

We need to paint a Widget and then convert it to bitmap. But its tricky because you cant simply do that. we have to place into widget tree and fetch its painted bitmap.

For a rough summary, the steps mentioned were:

First
We need to get our bitmaps right after they are drawn. There are multiple ways to do this, I use tiny AfterLayoutMixin available here.

Second
Lets create our custom widget, yay!

My widget accepts name as an parameter. I used ClipPath for the triangular Pointer arrow.

Third
Lets create a location object and list of locations and a method to generate widgets from the location list.