overview

A package to convert Widget, Local image, Network image, and Svg file to BitmapDescriptor which can use in google_maps_flutter icon marker.

Get started

Add dependency

dependencies:
  the_widget_marker: ^1.0.0

Add rounded marker icon with border from network image:

 onPressed: () async {
  markers.add(
  Marker( 
  icon: await MarkerIcon.downloadResizePictureCircle(
  'https://thegpscoordinates.net/photos/la/tehran_iran_5u679ezi8f.jpg',
   size: 150,
   addBorder: true,
   borderColor: Colors.white,
   borderSize: 15),
      ),
     );
   }

1. All other functions work the same above except widget to marker.

Widget To Marker

MyMap class hold your googleMap widget:

class MyMap extends StatefulWidget {
  const WidgetToMarker({Key? key}) : super(key: key);
  @override
  _WidgetToMarkerState createState() => _WidgetToMarkerState();
}
class _WidgetToMarkerState extends State<WidgetToMarker> {

  Set<Marker> _markers = <Marker>{};
  
  // declare a global key   
  final GlobalKey globalKey = GlobalKey();
  
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          body: Stack(
            children: [
            
              // you have to add your widget in the same widget tree
              // add your google map in stack
              // declare your marker before google map
              // pass your global key to your widget
              
              MyMarker(globalKey),
              
              Positioned.fill(
                child: GoogleMap(
                  initialCameraPosition: CameraPosition(
                      target: LatLng(32.4279, 53.6880), zoom: 15),
                  markers: _markers,
                ),
              ),
            ],
          ),
          floatingActionButton: FloatingActionButton.extended(
            label: FittedBox(child: Text('Add Markers')),
            onPressed: () async {
            
              // call widgetToIcon Function and pass the same global key
              
              _markers.add(
                Marker(
                  markerId: MarkerId('circleCanvasWithText'),
                  icon: await MarkerIcon.widgetToIcon(globalKey),
                  position: LatLng(35.8400, 50.9391),
                ),
              );
              setState(() {});
            },
          ),
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerFloat,
        ),
      ],
    );
  }
}

MyMarker class hold your widget that you want convert it to marker icon:

class MyMarker extends StatelessWidget {
  // declare a global key and get it trough Constructor

  MyMarker(this.globalKeyMyWidget);
  final GlobalKey globalKeyMyWidget;

  @override
  Widget build(BuildContext context) {
    // wrap your widget with RepaintBoundary and
    // pass your global key to RepaintBoundary
    return RepaintBoundary(
      key: globalKeyMyWidget,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            width: 250,
            height: 180,
            decoration:
                BoxDecoration(color: Colors.black, shape: BoxShape.circle),
          ),
          Container(
              width: 220,
              height: 150,
              decoration:
                  BoxDecoration(color: Colors.amber, shape: BoxShape.circle),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    Icons.accessibility,
                    color: Colors.white,
                    size: 35,
                  ),
                  Text(
                    'Widget',
                    style: TextStyle(color: Colors.white, fontSize: 25),
                  ),
                ],
              )),
        ],
      ),
    );
  }
}

Now we have a marker from our custom widget

Functions:

• widgetToMarker : an icon marker from your custom widget.
• svgAsset : a svg icon marker from your asset folder.
• pictureAsset : a picture(png,jpeg,etc…) icon marker from your asset folder.
• pictureAssetWithCenterText : a picture(png,jpeg,etc…) icon marker from your asset folder With text.
• circleCanvasWithText : a circle canvas with center text.
• downloadResizePicture : a picture(png,jpeg,etc…) icon marker from internet.
• downloadResizePictureCircle : a rounded picture(png,jpeg,etc…) icon marker with border from internet.

Notes

this was originally from https://github.com/mmolaei7878/custom_marker Because of intl crash ant not update, this is refork and make it work to latest flutter.

Download source code on GitHub

Flutterappworld

Provides the list of the opensource Flutter apps collection with GitHub repository.