What is are Routes?
The apps display their content in a full-screen container called pages or screens. In flutter, the pages or screens are called Routes.
Flutter provides a system for navigating from one screen to another. Small applications without complex deep linking can use Navigator. The Navigator widget displays screen as a stack using correct transition animations. To navigate to a new screen one has to access the Navigator through the route’s BuildContext and call methods such as push() or pop().
Because Navigator keeps a stack of Route objects that means it represents the history of stack. The push() method also takes a route object. The MaterialPageRoute object is a subclass of route that specifies the transition animations for material design.



Applications with simple navigation and simple deep linking requirements can use the Navigator for navigation and the MaterialApp.routes parameter for deep links:



With the widgets and routes in place, trigger navigation by using the Navigator.pushNamed() method. This tells Flutter to build the widget defined in the route and launch the screen.



By using pop() method the top most route that is the current route is popped off the navigator stack.



Limitations of using NamedRoute:
Although named routes can handle deep links, the behavior is always the same and can’t be customized. When a new deep link is received by the platform, Flutter pushes a new route onto the Navigator regardless where the user currently is. And hence using named routes is not recommended in many applications although this method is sufficient for your small applications having two or three screens.
For customizing navigation in your flutter app to achieve the most convenient navigation throughout your app follow the steps given below:

Step 1: Install get_it and in your pubspec.yaml file:
Why get_it ?
As your App grows, at some point you will need to put your app's logic in classes that are separated from your Widgets. Keeping your widgets from having direct dependencies makes your code better organized and easier to test and maintain. But now you need a way to access these objects from your UI code. Further we will be using an object from getIt called navigator.
The navigation is based on three important files, which are:

1. navigation_service.dart
2. routing_names.dart
3. routing_config.dart

Step 2: Creating navigation services
Now create a folder named services where you can place all your services like graphQL service, navigation services and such. Now under services create a folder named navigation_services and under that create a new file named navigation_service.dart. In here we will write our navigation functionalities,
This allows you to navigate anywhere from any point throughout the app without build context.

Step 3: Register the navigation service

Step 4: Now, to connect the NavigationService with the app we need to assign the navigator key in MaterialApp.


Step 5: Name your routes Create a file named route_name.dart under the navigation_services folder. And in here we will create classes according to our routes.

For example, if you have to initialize your login page route this is how you can go about it:
Step 6: Creating routing_config.dart Create routing_config.dart under navigation_services folder. Finally assign the screen file to the routes you initialized in route_name.dart in here.

Step 7: Actual Use Case