How to create custom Image Marker for google map in flutter and us it inside custom widget?

Question

How to use custom widget as market in flutter google map as to below image or how to achieve the below image as output in flutter ?

This is my first time working with maps in flutter. I know that I need to convert Image to Unit8List but that is the image only ! how to do it with images inside a custom widget ?

Images are from network api calls and the format is base46 string.

Solution

The working solution which I got after hours of testing is masking + adding border as per requirement to image on server side. as I was already able to convert the image to BitmapDescriptor. so simply it now I got the desired output.

Note: I was also able to convert the base64 Image String to image and get it working in the mobile app. Issue is sometimes it displays and sometimes not. and as the quantity of the images increase, the issue too. so the above solutions is the best solution one can implement with practical simplicity.

Comments

[princeoo7]

the issue is that the image is over the network and I cam across the idea to send image as base64 in api itself so that I don't need to wait for the image loading. current issue is that it takes some time for image to be processed so many times those Images are not displayed.

[jabamataro]

May I know how you are currently getting the image?

[jabamataro]

Have you tried using the http package in getting the images from URL then pass the bytes from the response to BitmapDescriptor.fromBytes(); ? I edited my answer to include this

[princeoo7]

as I stated the issue is not that the image is not been fetched. its not been displayed is the issue. anyways I got the answer which is one of the alternative.

[Stanley]

@jabamataro hi bro, is it can use dymanic image?