markerTooltipBuilder property

IndexedWidgetBuilder? markerTooltipBuilder

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:

  • MapLayer.tooltipSettings, to customize the color and stroke of the tooltip.
  • SfMapsThemeData.tooltipBorderRadius, to customize the corners of the tooltip.
late MapShapeSource _mapSource;
late MapShapeSource _mapSublayerSource;
late List<MapLatLng> _data;
late MapZoomPanBehavior _zoomPanBehavior;

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(
    shapeDataField: "name",

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


Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: EdgeInsets.all(15),
      child: SfMaps(
        layers: <MapLayer>[
            source: _mapSource,
            zoomPanBehavior: _zoomPanBehavior,
            sublayers: [
                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),
                    return Container(
                     child: Icon(Icons.airplanemode_active),

class DataModel {
  const DataModel(,

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


final IndexedWidgetBuilder? markerTooltipBuilder;