Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to push multiple routes with Flutter Navigator

Tags:

flutter

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?

like image 755
Arthur Thompson Avatar asked Sep 17 '17 00:09

Arthur Thompson


People also ask

How do you use pushNamed Flutter?

To use pushNamed, an Navigator. onGenerateRoute callback must be provided, Returns a Future that completes to the result value passed to pop when the pushed route is popped off the navigator.

What is the difference between push and pushNamed in Flutter?

push() method then it will result in a lot of code duplication. So when you have multiple routes in your app then you should use Navigator. pushNamed(). To identify and differentiate between multiple routes, we can give a name to the routes.


2 Answers

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.

like image 134
Collin Jackson Avatar answered Oct 06 '22 08:10

Collin Jackson


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());
like image 28
Touré Holder Avatar answered Oct 06 '22 07:10

Touré Holder