image in icon (BitmapDescriptor) for gmap

Question

I am trying to create a bmp icon for my google map markers. I need to add dynamically different background pictures to fit the circle in the loop. Not really sure how to approach this since im new to flutter, is there actually any way I can preview the mapbitdescriptor while trying to do this? Basically I need a circle in that loop that takes an image as a background.

  Future<BitmapDescriptor> customBitMap(String imageUrl) async {

    final myImage = await Image(image: AssetImage('assets/images/icon.png'));
    final pictureRecorder = ui.PictureRecorder();
    final canvas = Canvas(pictureRecorder);

    
        
    final recordedPicture = pictureRecorder.endRecording();
    final img = await recordedPicture.toImage(20, 20);
    final data = await img.toByteData(format: ui.ImageByteFormat.png);

    return BitmapDescriptor.fromBytes(data!.buffer.asUint8List());
  }

Answer 1

What I understood from your question is you want a display an image inside the circle of that marker.

For that, you can use Stack widget. You have to put both your marker image and the image you want to display inside Stack and position them accordingly.

Look at this example, I have tried using Stack

Stack(
                children: [
// Widget to display image inside the marker
                  Positioned(
                    top:10,
                    left: 25,
                    child: Container(
                      width: 120,
                      height: 120,
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.black, width: 2),
                          image: DecorationImage(image: AssetImage("assets/images/f3.png")),
                          borderRadius: BorderRadius.circular(60),
                        ),
                        child: Container()),
                  ),
// Marker image
                  Image.asset('assets/images/marker.png'),
                ],
              ),

Check Output Here

You can adjust the height,width and position according to your need!

Answer 2

Split the icon into two icons. The first one _img1 is icon but missing the part in the middle that you want to fill with the backround. Not white! But transparent!. But the second one _img2 is only the Part of the icon that you want to fill with the image. But both images should have the same size. _background is the image of the city in this case. Ensure that the background of the icons is not white but transparent!

// draw the background
canvas.drawImage(_background, Offset(0,0), Paint());

// Save the current layer of the canvas with BlendMode.dstATop
// Everything that was drawn before this call will only be
// drawn at top of things that will be drawn between saveLayer and restore
canvas.saveLayer(null, Paint()..blendMode = BlendMode.dstATop);

// draw image 2
canvas.drawImage(_img2, Offset(0,0), Paint());

// restore canvas
canvas.restore();

// draw image 1
canvas.drawImage(_img1, Offset(0,0), Paint());

Answer 3

In my project I am using this code and it works.

  Future<BitmapDescriptor> getIcon({required String imagePath}) async {
    final Uint8List markerIcon =
        await getBytesFromAsset(imagePath, 60);
    BitmapDescriptor icon = BitmapDescriptor.fromBytes(markerIcon);
    return icon;
  }

   Future<Uint8List> getBytesFromAsset(String path, int width) async {
    ByteData data = await rootBundle.load(path);
    Codec codec = await instantiateImageCodec(data.buffer.asUint8List(),
        targetWidth: width);
    FrameInfo fi = await codec.getNextFrame();
    return (await fi.image.toByteData(format: ImageByteFormat.png))
        .buffer
        .asUint8List();
  }