Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 3.0.3.7 release ready!
Deniel Kerr
Founder. Opencart
Top Partners
In this tutorial, we’ll cover the Routing in Flutter.
Flutter 1.0 took an imperative approach to navigation.
Navigator
The Navigator class provides all the navigation capabilities in a Flutter app.
Navigator provides methods to mutate the stack by a push to stack or by popping from the stack. The Navigator.push method is for navigating to a newer page and Navigator.pop is for going back from the current page.
Navigator.push
Navigator.pop
Here is a basic example of pop and push: the push method takes BuildContext as the first argument and the second argument is a PageBuilder. This example uses MaterialPageRoute, which provides the transition animation and handles route changes:
pop
push
BuildContext
PageBuilder
MaterialPageRoute
You can also check out our Flutter app development services for more Flutter App Development.
The pop method only takes BuildContext and changes the current route.
Navigator provides more methods, including *pushReplacement*, which make arguments similar to push. It will replace the current route, so navigating back to the older route is not possible.
*pushReplacement*
For example, upon successful login, you would want to use *pushReplacement* to prevent the user from returning to the login screen.
Allow you to change the path by using strings instead of providing component classes, which in turn enables you to reuse code.
Are defined as a map on MaterialApp. These routes are usable from any part of the application.
MaterialApp
The route is a map with string keys and values such as builders that are passed to the routes property on MaterialApp:
routes
Instead of push, pushNamed is used to change to a new route. Similarly, *pushReplacementNamed* is used instead of pushReplacement. The pop method is the same for all the routes.
pushNamed
*pushReplacementNamed*
pushReplacement
Navigator takes a list of pages and displays the last page. You can change its pages by adding or removing pages from the end of the list.
The example below demonstrates how to use the Navigator class with the new Flutter Navigator using page-based navigation.
The _page is state managed by this class. For navigation, this _page is manipulated in the setState call:
_page
setState
The _page is passed to the Navigator class. Navigator will change the current page based on the value of _page.
The initial page can be set by adding a page in the initState lifecycle method:
initState
To create a new material page, use the MaterialPage widget. MaterialPage takes a child and a key. The Navigator uses key to differentiate between pages and detect page change.
MaterialPage
key
On the click button press, a new page is added to _page state. setState is called to trigger a rebuild of the widget and Navigator automatically handles the page change.
click
This page is built in the same way as _buildMain, but instead of adding a new page, it removes one and triggers rebuild.
_buildMain
In addition to using the _pages list as a state, you can use any other state to perform navigation. Here’s another example:
_pages
RouterDelegate
RouterDelegate is a core widget used by Router. It responds to the engine’s intent for route push and route pop. New navigation allows the creation of RouterDelegate for better control over navigation.
Router
A RouterDelegate is created by extending the RouterDelegate<AppRouteState> class with PopNavigatorRouterDelegateMixin,ChangeNotifier mixins.
RouterDelegate<AppRouteState>
PopNavigatorRouterDelegateMixin,ChangeNotifier
_selected tracks the current route. This is similar to the state used in the earlier example.
_selected
notifyListeners is used instead of setState to trigger a rebuild. _selected is changed to change the route.
notifyListeners
This is similar to _buildMain:
The build function returns the Navigator widget, which is used to lay out other pages. This function is similar to build from the previous function. Instead of setState, notifyListeners is used to trigger rebuild.
build
This function uses information passed by the router to change the route.
RouteInformationParser
setNewRoutePath receives the configuration from the router. This configuration is parsed by RouteInformationParser.
setNewRoutePath
For the parsing state passed by the OS, engine, etc., a class should extend RouteInformationParser. restoreRouteInformation takes the return value from currentConfiguration and converts it to RouteInformation.
restoreRouteInformation
currentConfiguration
RouteInformation
parseRouteInformation returns the router state, which is passed to setNewRoutePath.
parseRouteInformation
MaterialApp now has a newly named constructor, which implements a router that takes Delegate and InformationParser as arguments.
Delegate
InformationParser
Thanks for reading.
Happy Coding 🙂
For more flutter tutorials, visit mobikul blog
Your email address will not be published. Required fields are marked*
Name*
Email*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies. Learn more about privacy policy
Name
Email
Subject
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.