Ripple animation using circles on google map flutter lags the app

Question

Following is the video that demonstrate the problem I am facing doing animations on google map.

output of animation

I don't know why the app lags doing animations on google map specifically. I have also used https://pub.dev/packages/flutter_animarker but same result app lags is it the google plugins implementation that does'nt support animations or I'm doing the wrong way.

Following is the code that produces the issue.

class GoogleMapInteg extends StatefulWidget {
   const GoogleMapInteg({super.key});

  @override
  State<GoogleMapInteg> createState() => _GoogleMapIntegState();
}

class _GoogleMapIntegState extends State<GoogleMapInteg>
  with SingleTickerProviderStateMixin {
 //* location initial
 final CameraPosition ciaro =
    const CameraPosition(target: LatLng(30.0455, 31.2360), zoom: 12.4746);

//* google map controller
late GoogleMapController? gmcontroller;

//* Initial delay
bool loading = true;
bool circleLoaded = false;
double radius = 1500; //* circle radius
AnimationController? animationController;
Set<Circle>? circles = {};

@override
void initState() {
  animationController = AnimationController(
    vsync: this,
    duration: (const Duration(milliseconds: 800)),
  )..repeat();

  _delay();
  super.initState();
}

//* initial delay
_delay() {
  //* delay before loading map
  Future.delayed(
    const Duration(milliseconds: 500),
    () => setState(
      (() => loading = false),
    ),
  );
}

@override
void dispose() {
  //* dispose animations and map here
  animationController!.dispose();
  gmcontroller!.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: !loading
        ? Consumer<StationController>(
            //* [Station] consumer builder
            builder: (context, value, child) {
            return AnimatedBuilder(
              animation: animationController!,
              builder: (context, child) => GoogleMap(
                initialCameraPosition: ciaro,
                zoomControlsEnabled: true,
                circles: value.stations
                  .map<Circle>(
                    (e) => Circle(
                      fillColor: kPrimaryColor.withOpacity(
                          (animationController!.value - 1.0).abs()),
                      strokeColor: Colors.transparent,
                      strokeWidth: 1,
                      circleId: CircleId(e.name!),
                      visible: true,
                      center: e.location!,
                      radius: (radius * animationController!.value),
                    ),
                  )
                  .toSet(),
                markers: value.stations
                    .map<Marker>(
                    (Station element) => Marker(
                      markerId: MarkerId(element.name!),
                      position: element.location!,
                      consumeTapEvents: true,
                      icon: element.selected
                          ? element.iconNotSelected
                          : element.iconSelected,
                        onTap: () {
                          //* ADDING STATIONS TO PICKUP AND DESTINATION

                          value.addStation(element.name);
                        },
                      ),
                    )
                    .toSet(),

                //* ON MAP CREATED CONTROLLER

                onMapCreated: (GoogleMapController controller) {
                  //* setting map custom style for hinding labels

                  gmcontroller = controller;
                  gmcontroller!.setMapStyle(
                    jsonEncode(mapStyle),
                  );
                },
              ),
            );
          })
         //* PROGRESS INDICATOR
        : const Center(
            child: CircularProgressIndicator(
              color: kPrimaryColor,
              strokeWidth: 2.0,
            ),
          ),
     );
  }
}

Commissary

Answer 1

is it the google plugins implementation that does'nt support animations or I'm doing the wrong way.

The issue is that each frame of the animation reload the whole map behind the scene. The issue is google maps library itself...

I believe the best approach for you might be to load the circle outside of the maps plugin.

Basically create a Stack with a layer where you will draw your circle and their animation, outside of Google maps. You will then need to listen to the Maps onMove and offset your overlay accordingly. I am not sure there is a way around that, as there is no support for circle animations on Gmap.

Dashed

Google maps implementation on flutter is not available in dart, hence we are communicating with native API's (Android, IOS) which is causing the animation jankiness (laggs). But is workable on very high performant devices. – Commissary