How to push multiple routes with Flutter Navigator
You can call Navigator.push()
several times in a row; the routes underneath the top one will not visibly transition but they'll be hiding underneath. (Edit: Turns out this isn't true, at least on iOS, see issue 12146)
Note that you can also alter routes below the top route using methods of NavigatorState
, such as removeRouteBelow
and replaceRouteBelow
. This is useful for building non-linear navigation experiences.
I solved this by pushing several routes in a row without animation to solve transition visibility issues. So far, it works fine on iOS for me. Here's a way to do it.
Create a NoAnimationPageRoute
by extending MaterialPageRoute
and overriding buildTransitions
:
class NoAnimationPageRoute<T> extends MaterialPageRoute<T> {
NoAnimationPageRoute({ WidgetBuilder builder }) : super(builder: builder);
@override
Widget buildTransitions(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child) {
return child;
}
}
Create a function that uses NoAnimationPageRoute
:
Future<T> pushWithoutAnimation<T extends Object>(Widget page) {
Route route = NoAnimationPageRoute(builder: (BuildContext context) => page);
return Navigator.push(context, route);
}
Call the function several times in a row:
pushWithoutAnimation(Screen1());
pushWithoutAnimation(Screen2());
pushWithoutAnimation(Screen3());