Flutter Navigation 1.0
Navigation in application development refers to the process of moving between different features within an app e.g., screens, menus actions, tabs, dialogs etc.
A well-designed navigation enhances a user’s experience in the application.
Navigation 1.0 key concepts
Navigation in Flutter is built within the framework. Flutter offers navigational widgets to build your application’s navigation flow. One of the common widgets is the Navigator Widget which manages the stack of routes.
A ‘Route’ represents the screen or page which can be added (pushed) or removed (popped) from the navigation stack. The Route object will create content which will be visible on the screen.
The Navigator class handles the navigation stack. The navigation stack represents the history of the screens as visited by the user. The navigator widget allows for the routes to be popped and pushed off and on the stack.
When a user navigates to a new screen (the orange screen above), the Navigator widget pushes the corresponding Route onto the top of the stack, which causes the new screen to appear. And when the user navigates back to a previous screen (the yellow screen above), the Navigator widget pops that top Route off the stack, which causes the previous screen to reappear.
In short; to navigate to a new screen, the route is pushed onto the navigator’s stack and to return to the previous screen, it is popped off the navigator’s stack.
Implementation
E.g., in an application with two screens (PageOne() and PageTwo), to navigate to the second page, use the Navigator.push method.
Navigator.push(
context,
MaterialPageRoute(builder: (context) => PageTwo()),
);To return to the previous screen, simply use the Navigator.pop method.
Navigator.pop(context);Named routes
As the application gets more complex with more screens and pages, using named routes can be more convenient and straightforward as opposed to the implementation shown above.
However, for very complex apps, consider exploring state management solutions or other routing packages for greater flexibility and efficient handling of the complex navigation scenarios.
With named routes, define the routes in the MaterialApp or CupertinoApp widget and navigate to the new screen using the pushNamed method.
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
initialRoute: '/',
routes: {
'/': (context) => const PageOne(),
'/second-page': (context) => const PageTwo(),
},
);
}To navigate to the second page using the named route
Navigator.pushNamed(context, '/second-page');To return to the previous screen, the pop method works the same way. So, Navigator.pop(context);
Passing data between screens
To pass data from one screen to the next, you’ll need to include the arguments to be passed in the next screen in the Navigator.pushNamed() function.
E.g., if in PageOne above, we have a TextField and the text from that widget is to be read in the next screen, our navigation will look like this:
Navigator.pushNamed(context, '/second-page', arguments: controller.text);You can then access the argument in the target route’s build() method, i.e., in PageTwo as below:
final theText = ModalRoute.of(context)!.settings.arguments;
...
Text('The text is: $theText'),Here is a visual of the implementation:
The code for the same can be found on GitHub. Here is the link.
In Navigator 1.0 (also referred to as imperative), you can only add a page to the top of the navigation stack and remove the topmost route. However, as use cases for navigation became more complex, you might need to advance to Navigator 2.0 which is a declarative mechanism that allows you to control the navigation stack completely.
We’ll be looking at Navigator 2.0 in our next article, so stick around for that!
Moving doesn’t change who you are. It only changes the view outside your window.
— Rachel Hollis
Thank you for reading! ❤
