Nested Navigator with Transparent Background Slide Transition

Viewed 199

I have an app with a video background. In order to keep the background, I created a nested navigator that changes everything on the page except the background (each page content has a transparent background to let the video show through).

I'm also making a custom transition so the entire page content slides left.

I've created the navigator like this:

HeroControllerScope(
  controller: MaterialApp.createMaterialHeroController(),
  child: const Navigator(
    pages: [MaterialPage(child: WelcomePage())],
  ),
),

And create the custom route like this:

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

Then I call it like this:

Navigator.of(context).push(SlideRightRoute(
  exitPage: widget,
  enterPage: const WaitlistPage()));

Everything works well, except that I get double the original WelcomePage() widget (exitPage). One stays stationary then disappears when the transition is done, and the other correctly does the slide transition.

I feel like I almost had it solved by wrapping the page in an Opacity() widget and using setState() but then I don't know how to set the opacity back to 1 once the reverse transition happens. (plus I'm not sure that's actually the best way to handle this)

Any guidance would be much appreciated!

0 Answers
Related