onTap property
Callback to receive tap event for this circle.
You can customize the appearance of the tapped circle based on the index passed on it as shown in the below code snippet.
late List<MapLatLng> _circles;
late MapShapeSource _mapSource;
int _selectedIndex = -1;
@override
void initState() {
_circles = const <MapLatLng>[
MapLatLng(-14.235004, -51.92528),
MapLatLng(51.16569, 10.451526),
MapLatLng(-25.274398, 133.775136),
MapLatLng(20.593684, 78.96288),
MapLatLng(61.52401, 105.318756)
];
_mapSource = MapShapeSource.asset(
'assets/world_map.json',
shapeDataField: 'name',
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
height: 350,
child: Padding(
padding: EdgeInsets.only(left: 15, right: 15),
child: SfMaps(
layers: <MapLayer>[
MapShapeLayer(
source: _mapSource,
sublayers: [
MapCircleLayer(
circles: List<MapCircle>.generate(
_circles.length,
(int index) {
return MapCircle(
center: _circles[index],
color: _selectedIndex == index
? Colors.blue
: Colors.red,
onTap: () {
setState(() {
_selectedIndex = index;
});
});
},
).toSet(),
),
],
),
],
),
),
)),
);
}
Implementation
final VoidCallback? onTap;