color property

Color? color

Fills the tooltip by this color.

This snippet shows how to set the tooltip color in SfMaps.

late MapShapeSource _mapSource;
late List<Model> _data;

void initState() {

   _data = <Model>[
    Model('India', 280, "Low",,
    Model('United States of America', 190, "High",,
    Model('Pakistan', 37, "Low", Colors.yellow),

   _mapSource = MapShapeSource.asset(
     shapeDataField: "name",
     dataCount: _data.length,
     primaryValueMapper: (int index) => _data[index].country,
     shapeColorValueMapper: (int index) => _data[index].color


Widget build(BuildContext context) {
  return Scaffold(
     body: Padding(
       padding: EdgeInsets.all(15),
       child: SfMaps(
         layers: <MapLayer>[
             source: _mapSource,
             tooltipSettings: MapTooltipSettings(color:,
             shapeTooltipBuilder: (BuildContext context, int index) {
               if(index == 0) {
                 return Container(
                   child: Icon(Icons.airplanemode_inactive),
                 return Container(
                      child: Icon(Icons.airplanemode_active),

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

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

See also:

  • strokeColor, for customizing the stroke color of the tooltip.
  • strokeWidth for customizing the stroke width of the tooltip.


final Color? color;