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!