onTap property

Callback to receive tap event for this polyline.

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

 late MapZoomPanBehavior _zoomPanBehavior;
 late List<MapLatLng> _polyLines;
 late MapShapeSource _mapSource;
 int _selectedIndex = -1;

  @override
  void initState() {
    _polyLines = <MapLatLng>[
      MapLatLng(13.0827, 80.2707),
      MapLatLng(14.4673, 78.8242),
      MapLatLng(14.9091, 78.0092),
      MapLatLng(16.2160, 77.3566),
      MapLatLng(17.1557, 76.8697),
      MapLatLng(18.0975, 75.4249),
      MapLatLng(18.5204, 73.8567),
      MapLatLng(19.0760, 72.8777),
    ];

    _mapSource = MapShapeSource.asset(
      'assets/india.json',
      shapeDataField: 'name',
    );

    _zoomPanBehavior = MapZoomPanBehavior(
        zoomLevel: 3, focalLatLng: MapLatLng(15.3173, 76.7139));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Polyline')),
      body: SfMaps(
        layers: [
          MapShapeLayer(
            source: _mapSource,
            sublayers: [
              MapPolylineLayer(
                polylines: List<MapPolyline>.generate(
                  1,
                  (int index) {
                    return MapPolyline(
                      points: _polyLines,
                      color: _selectedIndex == index
                        ? Colors.blue
                        : Colors.red,
                      onTap: () {
                        setState(() {
                         _selectedIndex = index;
                        });
                      },
                    );
                  },
                ).toSet(),
              ),
            ],
            zoomPanBehavior: _zoomPanBehavior,
          ),
        ],
      ),
    );
  }

Implementation

MapPolyline class