animation property

Animation for the arcs in MapArcLayer.

By default, arcs 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 MapShapeSource _mapSource;
 late List<Model> _arcs;

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

   _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: [
              MapArcLayer(
                arcs: List<MapArc>.generate(
                  _arcs.length,
                  (int index) {
                    return MapArc(
                      from: _arcs[index].from,
                      to: _arcs[index].to,
                    );
                  },
                ).toSet(),
                animation: _animation,
              ),
            ],
          ),
        ],
      ),
    );
  }

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

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

  MapLatLng from;
  MapLatLng to;
}

Implementation

MapArcLayer class