Design Custom Map Markers from widgets (Flutter)

Flutter: If you want to add custom beautiful markers to Map? → read this

Note: In this example, I have used OpenStreetMap, you can do the same for Google Maps with this flutter map plugin by just changing the TileLayer Options to google Maps.

Plugins

flutter_map: ^0.14.0
latlong2: ^0.8.1
flutter_rating_bar: ^4.0.0

imports

import 'package:flutter_map/plugin_api.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
import 'package:latlong2/latlong.dart';

Initialize List of markers

List<Marker> markers = [];

Flutter map plugin to load OpenStreetMap, your Widget build should look like this

@override
Widget build(BuildContext context) {
  return new FlutterMap(
    options: new MapOptions(
      center: new LatLng(34.78876328928188, 72.35709758636386),
      zoom: 13.0,
    ),
    layers: [
      new TileLayerOptions(
          urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          subdomains: ['a', 'b', 'c']),
      new MarkerLayerOptions(
        markers: [
          for (int i = 0; i < markers.length; i++) markers[i]
        ],
      ),
    ],
  );
}

Add Marker to the list

AddMarkers(){
  markers.add(
    Marker(
      width: 150.0,
      height: 150.0,
      point: LatLng(34.79177186733899, 72.36323729075004),
      anchorPos: AnchorPos.align(AnchorAlign.top),
      builder: (ctx) => Stack(
        children: [
          Container(
            width: 150.0,
            height: 130.0,
            decoration: BoxDecoration(
              //    color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10)),
              image: DecorationImage(
                image: NetworkImage(
                    "https://q-xx.bstatic.com/xdata/images/hotel/840x460/216043601.jpg?k=df9a168a376eb2ddd97ba563929390df10edc55461b00059a1c8b3653846d7eb&o="),
                fit: BoxFit.cover,
              ),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [],
            ),
          ),
          Positioned(
            top: 80,
            bottom: 0,
            left: 0,
            right: 0,
            child: ClipPath(
              clipper: MyClipper(),
              child: Container(
                padding:
                EdgeInsets.only(bottom: 25, right: 5, top: 5, left: 5),
                margin: EdgeInsets.symmetric(vertical: 5, horizontal: 3),
                decoration: BoxDecoration(
                    color: Colors.deepPurple.withAlpha(200),
                    borderRadius: BorderRadius.circular(5)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "Test",
                      style: TextStyle(color: Colors.white, fontSize: 12),
                    ),
                    Row(
                      children: [
                        Text(
                          "56",
                          style:
                          TextStyle(color: Colors.white, fontSize: 8),
                        ),
                        SizedBox(
                          width: 5,
                        ),
                        RatingBarIndicator(
                          rating: 3.4,
                          itemBuilder: (context, index) => Icon(
                            Icons.star,
                            color: Colors.amber,
                          ),
                          itemCount: 5,
                          itemSize: 12.0,
                          unratedColor: Colors.amber.withAlpha(50),
                          direction: Axis.horizontal,
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    ),
  );
  
  setState(() {
    markers;
  });
}

Custom marker widget

initstate

@override
void initState() {
  // TODO: implement initState
   AddMarkers();
  super.initState();
}

Finally make clipper class for making this type clipper

widget clipper

MyClipper.dart

import 'package:flutter/material.dart';

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    double factor = 20.0;
    path.lineTo(0, size.height);
    path.lineTo(factor, size.height - factor);
    path.lineTo(size.width - factor, size.height - factor);
    path.quadraticBezierTo(size.width, size.height - factor, size.width,
        size.height - (factor * 2));
    path.lineTo(size.width, factor);
    path.quadraticBezierTo(size.width, 0, size.width - factor, 0);
    path.lineTo(factor, 0);
    path.quadraticBezierTo(0, 0, 0, factor);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) => true;
}

Simple as that, and now your applications will be personalized and stand out from the rest!
Stay tuned for other posts regarding Flutter.