How to push multiple routes with Flutter Navigator

Question

If I push a route in flutter to a deep part of my app is there any way to supply additional routes so that the back/up navigation can be customized?

Answer 1

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.

Answer 2

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());