tooltipBuilder property

Returns a widget for the map line tooltip based on the index.

A map line tooltip displays additional information about the purpose of the shape drawn. To show tooltip for the shape return a completely customized widget in MapSublayer.tooltipBuilder.

The MapSublayer.tooltipBuilder callback will be called when the user interacts with the shape.

late MapShapeSource _mapSource;
late List<DataModel> _data;
int _selectedIndex = -1;

 @override
 void initState() {
   _mapSource = MapShapeSource.asset(
     'assets/usa.json',
   );

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

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Line layer')),
      body: Column(
        children: [
          Container(
            child: SfMaps(
              layers: [
                MapShapeLayer(
                  source: _mapSource,
                  sublayers: [
                    MapLineLayer(
                      lines: List<MapLine>.generate(
                        _data.length,
                        (int index) {
                          return MapLine(
                              from: _data[index].from,
                              to: _data[index].to,
                              dashArray: [8, 3, 4, 2],
                              color: _selectedIndex == index
                                  ? Colors.red
                                  : Colors.blue,
                              width: 2,
                              onTap: () {
                                setState(() {
                                  _selectedIndex = index;
                                });
                              });
                        },
                      ).toSet(),
                      tooltipBuilder: (BuildContext context, int index) {
                        if (index == 0) {
                          return Container(
                            child: Icon(Icons.airplanemode_inactive),
                          );
                        } else {
                          return Container(
                            child: Icon(Icons.airplanemode_active),
                          );
                        }
                      },
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

class DataModel {
  DataModel(this.from, this.to);
  MapLatLng from;
  MapLatLng to;
}

Implementation

MapSublayer class