bubbleTooltipBuilder property

Returns a widget for the bubble tooltip based on the index.

A bubble tooltip displays additional information about the bubble on a map. To show tooltip for the bubble, return a widget in MapShapeLayer.bubbleTooltipBuilder. This widget will then be wrapped in the existing tooltip shape which comes with the nose at the bottom. It is still possible to customize the stroke appearance using the MapTooltipSettings.strokeColor and MapTooltipSettings.strokeWidth.

To customize the corners, use SfMapsThemeData.tooltipBorderRadius.

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

late List<Model> _data;
late MapShapeSource _mapSource;

@override
void initState() {
  _data = <Model>[
    Model('India', 280, "Low", Colors.red),
    Model('United States of America', 190, "High", Colors.green),
    Model('Pakistan', 37, "Low", Colors.yellow),
  ];

  _mapSource = MapShapeSource.asset(
    "assets/world_map.json",
    shapeDataField: "name",
    dataCount: _data.length,
    primaryValueMapper: (int index) {
      return _data[index].country;
    },
    bubbleColorValueMapper: (int index) {
      return _data[index].color;
    },
    bubbleSizeMapper: (int index) {
      return _data[index].usersCount;
    }
  );

  super.initState();
}

@override
Widget build(BuildContext context) {
  return SfMaps(
    layers: [
      MapShapeLayer(
        source: _mapSource,
        bubbleTooltipBuilder: (BuildContext context, int index) {
          if(index == 0) {
             return Container(
               child: Icon(Icons.airplanemode_inactive),
             );
          }
          else
           {
             return Container(
               child: Icon(Icons.airplanemode_active),
             );
           }
        },
      )
    ],
  );
}

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

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

Implementation

MapShapeLayer class