Flutter - semi-transparent page not working properly when using PageRouteBuilder

I'm having difficulty getting a page with a transparent background, so it appears as an 'overlay' over the previous page, to work properly.

The original page this page is being opened on top of (ie. the one which should be visible below the new page) is opened like this:

Navigator.push(
  PageRouteBuilder<T>(
    transitionDuration: Duration(milliseconds: duration),
    pageBuilder: (context, animation, secondaryAnimation) => OriginalPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeThroughTransition(
        animation: animation,
        secondaryAnimation: secondaryAnimation,
        child: child,
      );
    },
  )
);

The code to push the new page on top is:

Navigator.of(context)
  .push(PageRouteBuilder(
      barrierDismissible: true,
      barrierColor: Colors.black.withOpacity(0.6),
      opaque: false,
      transitionDuration: Duration(milliseconds: 300),
      reverseTransitionDuration: Duration(milliseconds: 150),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        double begin = 0;
        double end = 1;
        var curve = Curves.easeIn;
        var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
        final offsetAnimation = animation.drive(tween);
        return BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 24 * offsetAnimation.value, sigmaY: 24 * offsetAnimation.value),
          child: FadeTransition(
            opacity: offsetAnimation,
            child: child,
          ),
        );
      },
      pageBuilder: (BuildContext context, _, __) => NewPage()
 ));

The strange thing is that if I use a standard MaterialPageRoute when pushing the original page, the page pushed on top of it behaves normally -- the background is transparent, the blur effect works as intended. The issue seems to be with the use of PageRouteBuilder, or perhaps FadeThroughTransition.

What am I doing wrong here?