How to create a custom marker which load image Url with Background Clip shape in flutter-CodePudding

I want to code a custom marker which can load a profile pic of a user which is from API and the background should bind with the clip shape which is customized....

click here for view design

CodePudding user response：

It looks like you are trying to use the google maps package, the marker in the package takes BitmapDescriptor, so basically you can load an image from asset. I did not try to add a margin to the marker icon, in my case I just edited the image.

final Uint8List markerIcon = await getBytesFromAsset('assets/images/map_pin.png', 600);
BitmapDescriptor customIcon = BitmapDescriptor.fromBytes(markerIcon);
marker.add(Marker(
        markerId: MarkerId(currentLocation!.latitude.toString()),
        position: currentLocation!,
        draggable: true,
        icon: customIcon,
        onDragEnd: (LatLng latlng) {
          currentLocation = latlng;
        }));

CodePudding user response：

I think you want ClipPath https://www.youtube.com/watch?v=oAUebVIb-7s and using some custom paths.

And then, position the map and your marker with a Stack widget.