onTap property

Callback to receive tap event for this arc.

You can customize the appearance of the tapped arc based on the index passed on it as shown in the below code snippet.

 late List<Model> _arcs;
 late MapZoomPanBehavior _zoomPanBehavior;
 late MapShapeSource _mapSource;
 int _selectedIndex = -1;

 @override
 void initState() {
   _zoomPanBehavior = MapZoomPanBehavior(
     focalLatLng: MapLatLng(40.7128, -95.3698),
     zoomLevel: 3,
   );

  _mapSource = MapShapeSource.asset(
     "assets/world_map.json",
     shapeDataField: "continent",
   );

  _arcs = <Model>[
     Model(MapLatLng(40.7128, -74.0060), MapLatLng(44.9778, -93.2650)),
     Model(MapLatLng(40.7128, -74.0060), MapLatLng(33.4484, -112.0740)),
     Model(MapLatLng(40.7128, -74.0060), MapLatLng(29.7604, -95.3698)),
     Model(MapLatLng(40.7128, -74.0060), MapLatLng(39.7392, -104.9903)),
   ];
 super.initState();
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: SfMaps(
       layers: [
         MapShapeLayer(
           source: _mapSource,
           zoomPanBehavior: _zoomPanBehavior,
           sublayers: [
             MapArcLayer(
               arcs: List<MapArc>.generate(
                 _arcs.length,
                 (int index) {
                   return MapArc(
                     from: _arcs[index].from,
                     to: _arcs[index].to,
                     color: _selectedIndex == index
                        ? Colors.blue
                        : Colors.red,
                     onTap: () {
                        setState(() {
                         _selectedIndex = index;
                        });
                     },
                   );
                 },
               ).toSet(),
             ),
           ],
         ),
       ],
     ),
   );
 }

class Model {
  Model(this.from, this.to);

  MapLatLng from;
  MapLatLng to;
}

Implementation

MapArc class