Change the orientation of the map according to the bearing changes of a trajectory with mapbox in flutter

Question

A cordial greeting to everyone. I need your help and guidance, since I have been in this mess for more than 3 days. I am working with the mapbox_maps_flutter library. I animate a route path with an animation controller, to position the camera according to the progress of the path. That works very well. The problem is with the bearing, since in sudden changes in trajectory the camera moves clumsily, so I thought to smooth out the change in the bearing with an “animation tween” but I couldn't achieve it.

animation?.addListener(() async {
      int listLength = cameraCoordinates.length;
      int currentPointIndex = (animation2!.value * listLength).floor();
      if (currentPointIndex >= 0 && currentPointIndex < listLength) {
        final currentCoordinates = cameraCoordinates[currentPointIndex];
        currentBearing =
            await mapboxMap?.getCameraState().then((value) => value.bearing);
        newBearing = cameraCoordinateAndBearing[currentPointIndex][1];

        mapboxMap?.setCamera(CameraOptions(
            center: Point(
                    coordinates: Position(
                        currentCoordinates[0]!, currentCoordinates[1]!))
                .toJson(),
            
));

        // Check if the current bearing is different from the new one
        if (currentBearing!.floor() != newBearing!.floor()) {
// if it is different, the bearingAnimation function is called for a smooth transition.
        bearingAnimation(currentBearing, newBearing);
        }
        
      }
    });

bearingAnimation(currentBearing, newBearing) {
    controller3
        ?.dispose(); // Ensures that the previous controller3 has been released
    controller3 = AnimationController(
      duration: const Duration(
          milliseconds:
              2000), // Duration
      vsync: this,
    );

    // Sets the bearing transition animation
    animation3 = Tween<double>(begin: currentBearing, end: newBearing).animate(
      CurvedAnimation(parent: controller3!, curve: Curves.linear),
    );
    
    // Listen to animation changes and update the camera
    animation3?.addListener(() {
      mapboxMap?.setCamera(
        CameraOptions(bearing: animation3!.value),
      );
    });
    controller3?.forward();
  }

This way of trying to update the bearing just shows jumps on the screen and doesn't even make the smooth transition I need.

In the library there is a method that seems great to me and I think it is what I am looking for to fulfill my purpose. Since it does not need “setCamera” and only rotates the map smoothly without interfering with the controller animation. but this method receives two “ScreenCoordinate”

mapboxMap?.rotateBy(
        ScreenCoordinate(x: 0, y: 0),
        ScreenCoordinate(
            x: MediaQuery.of(context).size.width,
            y: MediaQuery.of(context).size.height),
        MapAnimationOptions(duration: 1000, startDelay: 0));

What I have are two bearings “currentBearing” and the “newBearing”. I would like to implement the bearing rotations with “rotateBy”.

My goal is to keep the animation path always visible by pointing to the top of the mobile phone as shown in the images.

I thank you in advance for any comments, ideas, help or any reference on how I could solve this problem.