How to apply different animations to an old page during the transition?

Question

I have a panel as a tabbar at the bottom with custom animation and with page names. I have 5 pages that can be switched with the next animation: the new page should slowly increase visibility (FadeTransition) and the old page should move right or left depending on what page should be next. If the new page is placed on the right hand of the current page then the slide animation should go left, if it's placed on the left hand then the slide animation should go right.

As far as I know, there is no possibility of using secondaryAnimation to use different animations based on the next page. Because when we create the current page, we don't know what closing animation for the current page should be applied, we can only use one behavior for all transitions.

In this case, maybe anyone has suggestions on how can I implement this behavior?

I've drawn a scheme for the easiest understanding.

Answer 1

I've made this behavior by using the provider.

Before calling Navigator.pushReplacementNamed, when I know what the next page should be, I've defined the necessary direction that the old page should move. Remember it in my model variable. I've taken then this value right in my custom PageRouteBuilder with help of the Provider.

class MainPageRoute extends PageRouteBuilder {
  // ignore: unused_field
  final Widget _page;
  MainPageRoute(this._page)
      : super(
          pageBuilder: (context, animation, secondaryAnimation) => _page,
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            //here I've take necessary direction true = right, false = left
            final _isAnimationDirectionRight =
                context.read<ContextHandlingModel>().isAnimationDirectionRight;
            const _begin = Offset.zero;
            final _end = (_isAnimationDirectionRight)
                ? const Offset(0.1, 0.0)
                : const Offset(-0.1, 0.0);
            const _offsetCurve = Curves.fastOutSlowIn;
            const _opacityCurve = Curves.easeIn;

            final _offcetTween = Tween(begin: _begin, end: _end).chain(
              CurveTween(curve: _offsetCurve),
            );
            final _opacityOldTween = Tween(begin: 1.0, end: 0.0)
                .chain(CurveTween(curve: _opacityCurve));

            final _opacityNewTween = Tween(begin: 0.0, end: 1.0)
                .chain(CurveTween(curve: _opacityCurve));

            return SlideTransition(
              position: _offcetTween.animate(secondaryAnimation),
              child: FadeTransition(
                opacity: _opacityOldTween.animate(secondaryAnimation),
                child: FadeTransition(
                  opacity: _opacityNewTween.animate(animation),
                  child: child,
                ),
              ),
            );
          },
        );
}