markerTooltipBuilder property Null safety

IndexedWidgetBuilder? markerTooltipBuilder
final

Returns the widget for the tooltip of the MapMarker.

To show the tooltip for markers, return a customized widget in this. This widget will then be wrapped in the in-built shape which comes with the nose at the bottom.

This will be called when the user interacts with the markers i.e., while tapping in touch devices and hovering in the mouse enabled devices.

See also:

late MapShapeSource _mapSource;
late MapShapeSource _mapSublayerSource;
late List<MapLatLng> _data;
late MapZoomPanBehavior _zoomPanBehavior;

@override
void initState() {
  _data = <MapLatLng>[
    MapLatLng(11.1271, 78.6569),
    MapLatLng(15.3173, 75.7139),
    MapLatLng(28.7041, 77.1025)
  ];

  _mapSource = MapShapeSource.asset("assets/world_map.json",
      shapeDataField: "continent");

  _mapSublayerSource = MapShapeSource.asset(
    "assets/india.json",
    shapeDataField: "name",
  );

  _zoomPanBehavior = MapZoomPanBehavior(
      zoomLevel: 5, focalLatLng: MapLatLng(28.7041, 77.1025));

  super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: EdgeInsets.all(15),
      child: SfMaps(
        layers: <MapLayer>[
          MapShapeLayer(
            source: _mapSource,
            zoomPanBehavior: _zoomPanBehavior,
            sublayers: [
              MapShapeSublayer(
                source: _mapSublayerSource,
                initialMarkersCount: 3,
                markerBuilder: (BuildContext context, int index) {
                  return MapMarker(
                    latitude: _data[index].latitude,
                    longitude: _data[index].longitude,
                  );
               },
               markerTooltipBuilder: (BuildContext context, int index) {
                  if(index == 0) {
                    return Container(
                      child: Icon(Icons.airplanemode_inactive),
                    );
                  }
                  else
                  {
                    return Container(
                     child: Icon(Icons.airplanemode_active),
                    );
                   }
                },
              ),
            ],
          ),
        ],
      ),
    ),
  );
}

class DataModel {
  const DataModel(
   this.country,
   this.usersCount,
   this.storage,
   this.color,
  );

  final String country;
  final double usersCount;
  final String storage;
  final Color color;
}

Implementation

final IndexedWidgetBuilder? markerTooltipBuilder;