0

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

abishega nellaiyappan
  • 1
  • 2

2 Answers2

1

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;
        }));
RadiantOne
  • 189
  • 5
  • thanks for answer but i need to load a image from api and i need a bind the border/ background design mainly...anyway thanks for the answers... – abishega nellaiyappan Dec 01 '21 at 03:44
  • you can get the network image as a Uint8List. http.Response response = await http.Response response = await http.get( Uri.parse('https://flutter.io/images/flutter-mark-square-100.png'), ); final Uint8List markerIcon = await response.bodyBytes – RadiantOne Dec 01 '21 at 06:09
  • also you may find this answer helpful https://stackoverflow.com/questions/56597739/how-to-customize-google-maps-marker-icon-in-flutter – RadiantOne Dec 01 '21 at 06:12
0

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.

chongman
  • 2,447
  • 4
  • 21
  • 23