Mohamedfaroouk/widget_to_marker

Features

When using Google Maps, we always have a problem with adding a marker on the map, and the available tools were either drawing the marker through canvas path or using an image, but the problem is if we want to add words or data or add custom edit to this marker, but this package has solved the problem and now you can use any widget in flutter as a marker for google map ! using the .toBitmapDescriptor() function on the widget to use it as a marker icon!

Getting started

Add dependency

dependencies:
  widget_to_marker: ^1.0.6

1 - Create Your Widget To Make it as Marker:

import 'package:widget_to_marker/widget_to_marker.dart';

class TextOnImage extends StatelessWidget {
  const TextOnImage({
    super.key,
    required this.text,
  });
  final String text;
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        Image(
          image: const AssetImage(
            "assets/marker.png",
          ),
          height: 150,
          width: 150,
        ),
        Text(
          text,
          style: TextStyle(color: Colors.black),
        )
      ],
    );
  }
}

2 - Add it to the marker with .toBitmapDescriptor():

Marker(
      markerId: const MarkerId("3"),
      position: const LatLng(30.01124477440843, 30.78459296375513),
      icon: await TextOnImage(
        text: "Hello World",
      ).toBitmapDescriptor(
         logicalSize: const Size(150, 150), imageSize: const Size(150, 150)
      ),
    )

Note

You Can Use waitToRender Attribute to set duration for rendering large network and asset images

Enjoy!!

image