animation property

Animation for the circles in MapCircleLayer.

By default, circles 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 List<MapLatLng> circles;
 late MapShapeSource _mapSource;
 late AnimationController _animationController;
 late Animation<double> _animation;

 @override
 void initState() {
   _circles = const <MapLatLng>[
     MapLatLng(-14.235004, -51.92528),
     MapLatLng(51.16569, 10.451526),
     MapLatLng(-25.274398, 133.775136),
     MapLatLng(20.593684, 78.96288),
     MapLatLng(61.52401, 105.318756)
   ];

   _mapSource = MapShapeSource.asset(
     'assets/world_map.json',
     shapeDataField: 'name',
   );
   _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: Center(
         child: Container(
       height: 350,
       child: Padding(
         padding: EdgeInsets.only(left: 15, right: 15),
         child: SfMaps(
           layers: <MapLayer>[
             MapShapeLayer(
               source: _mapSource,
               sublayers: [
                 MapCircleLayer(
                   circles: List<MapCircle>.generate(
                     _circles.length,
                     (int index) {
                       return MapCircle(
                         center: _circles[index],
                       );
                     },
                   ).toSet(),
                   animation: _animation,
                 ),
               ],
             ),
           ],
         ),
       ),
     )),
   );
 }

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

Implementation

MapCircleLayer class