Three ways to handle Flutter Navigation
We have to think about navigation and how we can optimize the work with our navigation route pattern. Today I show you how you can manage your routes easy and how you can navigate in the first place.
Why is navigation important
Navigation is in every application a vital part, and the benefit of Flutter is, that it already contains an excellent routing system built-in. The benefit of a built-in routing system is a huge advantage that we have as flutter developers. As always, we have to know about the hidden traps and understand the tools so that we can decide for the best option for a given use case.
With a good routing strategy, you have a lot fewer problems in the future, and it also helps you to reduce boilerplate and maintenance cost in the long run.
How do we navigate in Flutter
In Flutter we have three different options of navigating between screens.
- Direct Navigation with MaterialPageRoute
- Static Navigation with Route Map
- Dynamic Navigation with Generated Routes
I want to show you all three options on a minimal app that I created.
1. Direct Navigation with MaterialPage Route
The primary navigation that you mostly use in prototyping is usually the direct navigation with MaterialPageRoute. You access an instance of the Navigator and push a new MaterialPageRoute inside. The route creates a new Widget that gets put on top of the navigation stack.
The MaterialPageRoute is responsible for more than just routing. It also controls the transition and keeps the old route in memory on the stack so that we can route back as soon as we want. For that, we should call Navigator.pop(). This method removes the first Widget from the stack.
2. Static Navigation with Route Map
The second option that we have is the route map, and this is the preferred way if you use a state management tool like, Provider or BloC pattern. You have the option to create a Map with String keys that identifies different WidgetBuilder Methods and take care of the navigation.
The LobbyScreen.route, LoginScreen.route and GameScreen.route are just the static const String representation of the name of this route. Now you can execute the pushNamed against the Navigator to push the new route on top of the stack.
The static “route” is a variable that contains a string that identifies the route to the specific Widgets. Be mindful that if one of your routes contains a slash as a prefix, you have to provide at least one path with a pure “/”. This is your primary path. The Widget Builder function, that the map represents for the different routes, getting used to create a MaterialPageRoute inside of the Flutter Framework to navigate to the different Views.
The only disadvantage is that you cannot pass a value inside of a route. The possiblity to pass arguments to the route will be handled by the dynamic navigation.
3. Dynamic Navigation with onGeneratedRoute
The third option that I would like to add is the option to create an onGeneratedRoute. The onGeneratedRoute has the advantage that you can create routes and access the passed through arguments.
The initial route takes still the responsibility to add the correct route to the stack. The benefit is now, if we call pushNamed, we can use the value of the argument and pass more information into the route. We can initialize the Widget with additional information. So if we push, for example from the Login Screen to the Lobby Screen, we can pass some arguments into the pushNamed method.
As you can see, the push namedMethod takes a parameter called “arguments” which is anything (Object). In our case, we pass a map down that contains a user message.
If we change now the onGeneratedRoute that it accepts the argument and passes it down to the LobbyScreen, we pass information into another route with this solution.
Disadvantage of this solution is that you will lose all types here, so you have to type check against it later on.
Packages
Of course, this is the build-in options for routing and navigation, and there are loads of fabulous packages that could help you optimize your code even further. Some packages that I can recommend are.
Fluro
Fluro is an excellent addition to the already existing router system, that makes it way more comfortable to use custom transitions between screens.
Angel Route
You worked maybe with an HTTP Server before. Angel Route comes from the Angel HTTP Server. The routing system is in this case isomorphic, and it keeps your code clean and makes it easy to read. Additionally, it handles the pass over of id’s and other information slightly more accessible.
Flutter Modular
This package is not a simple routing framework. It is more a general project architecture, but it adds many functionalities to the router and uses the standard routing system very smart.
Conclusion
Flutters Navigation system is reliable and should help your project in nearly all cases to find the right tooling. There are just a few things that you should keep in mind. But most of the Routing system is already part of the Flutter Framework.
If you search the source code for these example you can find it here:
If you search further material on Navigation and route I highly recommend you the talk of Simon Lightfood about Navigator and Transitions.
Thank you for reading and curious!
