NavigationUtils provides a familiar API for navigation that mirrors Navigator 1, making it easy to navigate between pages in your Flutter app using Navigator 2.
Navigation methods NavigationUtils supports three primary ways to navigate: by path, by name, or by route object. All navigation functions are accessible through NavigationManager.instance.
Path-based navigation Path-based routing uses the URL path directly. This is the URL shown in the browser address bar on web platforms.
NavigationManager .instance. push ( '/projects' );
Named navigation Named routes work just like Navigator 1. Define a static name constant in your page widget and use it for navigation.
NavigationManager .instance. push ( ProjectsPage .name);
Define the name in your page widget:
class ProjectsPage extends StatefulWidget { static const String name = 'projects' ; @override _ProjectsPageState createState () => _ProjectsPageState (); }
Route object navigation For advanced use cases, navigate using a raw Route object:
NavigationManager .instance. pushRoute ( DefaultRoute (path : '/projects' ));
Push Add a new page to the navigation stack:
MaterialButton ( onPressed : () => NavigationManager .instance. push ( '/project/1' ), child : const Text ( 'Open Project Path' ), ),
From the example app in example/lib/main.dart:77-79:
MaterialButton ( onPressed : () => NavigationManager .instance. push ( '/project/1' ), child : const Text ( 'Open Project Path' ), ),
You can also push using named routes:
MaterialButton ( onPressed : () => NavigationManager .instance . push ( ProjectPage .name, pathParameters : { 'id' : '2' }), child : const Text ( 'Open Project Named' ), ),
Pop Remove the current page from the navigation stack and return to the previous page:
ElevatedButton ( onPressed : () => NavigationManager .instance. pop (), child : const Text ( 'Back' ) ),
From the example app in example/lib/main.dart:130-131:
ElevatedButton ( onPressed : () => NavigationManager .instance. pop (), child : const Text ( 'Back' )),
Push replacement Replace the current page with a new one without adding to the navigation stack:
NavigationManager .instance. pushReplacement ( '/home' );
This is useful for scenarios like:
Replacing a login page with the home page after authentication
Replacing a splash screen with the main app
Replacing an error page with a valid page
The replaced page is removed from the navigation stack, so users cannot navigate back to it using the back button.
Set routes For complete control over the navigation stack, use the set() method to define the entire route stack:
NavigationManager .instance. set ([ HomePage .name]);
This replaces the entire navigation stack with the specified routes. This is particularly useful for:
Resetting navigation state after logout
Setting up initial navigation state
Implementing custom back stack logic
Using set() replaces the entire navigation stack. Users won’t be able to navigate back to any previous pages that aren’t included in the new stack.
Next steps
Query parameters Learn how to pass data between pages using query parameters
Path parameters Define dynamic routes with path parameters