strokeColor property
Specifies the stroke color applies to the tooltip.
This snippet shows how to customize stroke color in SfMaps.
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(
strokeWidth: 2.0,
strokeColor: Colors.black,
),
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:
- strokeWidth for customizing the stroke width of the tooltip.
Implementation
final Color? strokeColor;