animation property

Animation for the polylines in MapPolylineLayer.

By default, polylines will be rendered without any animation. The animation can be set as shown in the below code snippet. You can customise the animation flow, curve, duration and listen to the animation status.

late AnimationController _animationController;
late Animation<double> _animation;
late MapZoomPanBehavior _zoomPanBehavior;
late List<MapLatLng> _polyLines;
late MapShapeSource _mapSource;

@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));

  _animationController = AnimationController(
    duration: Duration(seconds: 3),
    vsync: this,
  );

  _animation =
      CurvedAnimation(parent: _animationController,
      curve: Curves.easeInOut);

  _animationController.forward(from: 0);
  super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SfMaps(
      layers: [
        MapShapeLayer(
          source: _mapSource,
          zoomPanBehavior: _zoomPanBehavior,
          sublayers: [
            MapPolylineLayer(
              polylines: [
                MapPolyline(
                  points: _polyLines,
                )
              ].toSet(),
              animation: _animation,
            ),
          ],
        ),
      ],
    ),
  );
}

@override
void dispose() {
  _animationController?.dispose();
  super.dispose();
}

Implementation

MapPolylineLayer class