Android App Development
iOS 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 220.127.116.11 release ready!
In this tutorial, we’ll cover the Routing in Flutter.
Flutter 1.0 took an imperative approach to navigation.
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.
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:
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.
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.
The route is a map with string keys and values such as builders that are passed to the routes property on MaterialApp:
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.
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:
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:
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.
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.
This page is built in the same way as _buildMain, but instead of adding a new page, it removes one and triggers rebuild.
In addition to using the _pages list as a state, you can use any other state to perform navigation. Here’s another example:
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.
A RouterDelegate is created by extending the RouterDelegate<AppRouteState> class with PopNavigatorRouterDelegateMixin,ChangeNotifier mixins.
_selected tracks the current route. This is similar to the state used in the earlier example.
notifyListeners is used instead of setState to trigger a rebuild. _selected is changed to change the route.
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.
This function uses information passed by the router to change the route.
setNewRoutePath receives the configuration from the router. This configuration is parsed by RouteInformationParser.
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.
parseRouteInformation returns the router state, which is passed to setNewRoutePath.
MaterialApp now has a newly named constructor, which implements a router that takes Delegate and InformationParser as arguments.
Thanks for reading.
Happy Coding 🙂
For more flutter tutorials, visit mobikul blog
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
We've bought a Shopware Extension which is a hybrid App, which we can now offer in the Google Play Store and the IOS App Store. I'am still impressed how fast and how sharp the support team leads us through every process of the App-Store clarification. Very fast and useful response.
Founder, Das Apartment Living
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.