Flutter PageRouteBuilder transitionsBuilder customize secondary animation?

Question

In PageRouteBuilder's transitionBuilder method I'm using the code bellow but the secondary animation is ALWAYS the reverse of the animation. How can we have a slide in transition on a page and fade out on exit?

Widget leftToRightSlideTransition(context, animation, secondaryAnimation, child) {
  final Tween<double> doubleTween = Tween<double>(begin: 1.0, end: 0.0);
  final Animation<double> animDouble = doubleTween.animate(secondaryAnimation);
  final fadeTransition = FadeTransition(opacity: animDouble, child: child);

  var begin = Offset(-1.0, 0.0);
  var end = Offset.zero;
  var tween = Tween(begin: begin, end: end).chain(
    CurveTween(curve: Curves.easeIn),
  );
  return SlideTransition(
    position: tween.animate(animation),
    child: fadeTransition,
  );
}

Answer 1

If you want custom animations for enter and exit pages you need put SlideTransition to Stack widget for enter page and exit page. Here is exemple how should look iOS SlideTransition (Cupertino).

import 'package:flutter/material.dart';

class CupertinoRoute extends PageRouteBuilder {
  final Widget enterPage;
  final Widget exitPage;
  CupertinoRoute({this.exitPage, this.enterPage})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) {
            return enterPage;
          },
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) {
            return Stack(
              children: <Widget>[
                SlideTransition(
                  position: Tween<Offset>(
                    begin: const Offset(0.0, 0.0),
                    end: const Offset(-0.33, 0.0),
                  ).animate(
                      CurvedAnimation(
                      parent: animation,
                      curve: Curves.linearToEaseOut,
                      reverseCurve: Curves.easeInToLinear,
                    ),
                      ),
                  child: exitPage,
                ),
                SlideTransition(
                  position: Tween<Offset>(
                    begin: const Offset(1.0, 0.0),
                    end: Offset.zero,
                  ).animate(
                      CurvedAnimation(
                      parent: animation,
                      curve: Curves.linearToEaseOut,
                      reverseCurve: Curves.easeInToLinear,
                    ),
                      ),
                  child: enterPage,
                )
              ],
            );
          },
        );
}

and here you can customize animations how you want to both SlideTransition .

// And use it like this
Navigator.push(
        context,
        CupertinoRoute(
            exitPage: HomeScreen(),
            enterPage: SecondScreen()));