Make PageRouteBuilder animate just after current page animation finishes animating in flutter

I am trying to animate navigation between two pages. I managed to animate the loading of the second page by following Reso Coder's Tutorial. But I also needed to animate "exiting" animation for the current page.

I managed to achieve it using Animated Widget (stanim). When a user clicks on the navigation button, I just start the animation, and when the animation finishes it runs the navigation code. This works somewhat like what I needed but the animation looks janky when page animation finishes and PageRouteBuilder animation starts.

_controller = AnimationController(      vsync: this, duration: Duration(milliseconds: duration))    ..addStatusListener(      (status) {        if (status == AnimationStatus.completed) {          if (widget.nextPageBuilder != null) {            Navigator.push(              context,              PageRouteBuilder(                transitionDuration: Duration(milliseconds: duration),                pageBuilder: (context, animation, secondaryAnimation) =>                    widget.nextPageBuilder(animation),              ),            );          }        }      },    );  

Here is navigation logic

return ForwardButton(onPressed: () {        _controller.forward();  });  

https://stackoverflow.com/questions/66881096/make-pageroutebuilder-animate-just-after-current-page-animation-finishes-animati March 31, 2021 at 11:06AM