MapTooltipSettings class

Customizes the appearance of the bubble's or shape's tooltip.

late MapShapeSource _mapSource;
late List<Model> _data;

@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) => _data[index].country,
     shapeColorValueMapper: (int index) => _data[index].color
   );

   super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
     body: Padding(
       padding: EdgeInsets.all(15),
       child: SfMaps(
         layers: <MapLayer>[
           MapShapeLayer(
             source: _mapSource,
             tooltipSettings: MapTooltipSettings(color: Colors.red),
             shapeTooltipBuilder: (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;
}

See also:

• MapShapeLayer.shapeTooltipBuilder, for showing the completely customized widget inside the tooltip.