Navigation is an essential part of almost every Flutter application. Applications usually contain multiple screens such as Login, Home, Profile, Products, Product Details, Cart, Checkout, and Settings. Managing application routes means organizing how these screens are created, opened, closed, replaced, and connected with one another.
In Flutter, screens and pages are represented as routes. The Navigator manages these routes as a stack and provides methods such as push(), pop(), pushReplacement(), pushAndRemoveUntil(), and others. For more advanced applications, Flutter also provides Router-based navigation and routing packages such as go_router.
Application routing is the process of controlling movement between different screens or pages of an application.
For example, an e-commerce application may have the following flow:
Login
↓
Home
↓
Products
↓
Product Details
↓
Cart
↓
CheckoutEach screen can be represented by a route, and the Navigator controls the route stack.
In Flutter, a route represents a screen or page. Flutter documentation describes routes as the screens or pages used by the navigation system. A route is generally represented by a widget and managed by a Navigator.
For example:
HomeScreen
ProfileScreen
SettingsScreen
ProductScreenThese widgets can be displayed as routes in the application's navigation system.
The Navigator is a widget that manages a stack of routes. When a new route is pushed, it is placed on top of the stack. When the current route is popped, it is removed from the stack and the previous route becomes visible.
Before navigation:
[ Home ]
After opening Profile:
[ Home ]
[ Profile ]
After opening Settings:
[ Home ]
[ Profile ]
[ Settings ]
After pop():
[ Home ]
[ Profile ]
This stack-based behavior is one of the fundamental concepts of Flutter navigation.
Good route management helps an application maintain predictable navigation behavior.
| Method | Purpose |
|---|---|
push() | Adds a new route to the navigation stack. |
pop() | Removes the current route. |
pushReplacement() | Replaces the current route with another route. |
pushAndRemoveUntil() | Pushes a route and removes previous routes according to a condition. |
popUntil() | Pops routes until a specified condition is satisfied. |
pushNamed() | Pushes a route using a registered route name. |
pushReplacementNamed() | Replaces the current route using a named route. |
pushNamedAndRemoveUntil() | Pushes a named route and removes routes according to a condition. |
Navigator.push() adds a new route to the Navigator stack.
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SecondScreen(),
),
);ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ProfileScreen(),
),
);
},
child: const Text('Open Profile'),
)When the button is pressed, the Profile Screen is pushed onto the navigation stack.
Navigator.pop() removes the current route from the navigation stack.
Navigator.pop(context);ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Go Back'),
)If the current screen is Profile and Home is underneath it, pop() removes Profile and displays Home.
MaterialPageRoute creates a route with Material-style transition behavior.
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const DetailsScreen(),
),
);The builder callback returns the widget that should be displayed by the route.
Flutter also provides CupertinoPageRoute for Cupertino-style route transitions.
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => const DetailsScreen(),
),
);Both route types can be used with the Navigator depending on the desired platform-specific navigation behavior.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Route Management',
home: const HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ProfileScreen(),
),
);
},
child: const Text('Open Profile'),
),
),
);
}
}
class ProfileScreen extends StatelessWidget {
const ProfileScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Profile'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Go Back'),
),
),
);
}
}
Named routes allow screens to be identified by string names. For example:
/home
/profile
/settings
/products
/cartNamed routes can be registered using the routes property of MaterialApp.
MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => const HomeScreen(),
'/profile': (context) => const ProfileScreen(),
'/settings': (context) => const SettingsScreen(),
},
);You can then navigate using:
Navigator.pushNamed(
context,
'/profile',
);Flutter's current documentation notes that named routes are not recommended for most new applications. They are still useful for understanding existing applications and basic route configuration.
Using string literals throughout a large application can make route management harder. Route names can be stored as constants.
class AppRoutes {
static const String home = '/';
static const String login = '/login';
static const String profile = '/profile';
static const String settings = '/settings';
static const String products = '/products';
static const String cart = '/cart';
}Register them:
MaterialApp(
initialRoute: AppRoutes.home,
routes: {
AppRoutes.home: (context) => const HomeScreen(),
AppRoutes.login: (context) => const LoginScreen(),
AppRoutes.profile: (context) => const ProfileScreen(),
AppRoutes.settings: (context) => const SettingsScreen(),
AppRoutes.products: (context) => const ProductsScreen(),
AppRoutes.cart: (context) => const CartScreen(),
},
);Navigate using:
Navigator.pushNamed(
context,
AppRoutes.profile,
);The initial route determines which named route is displayed when the application starts.
MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => const HomeScreen(),
'/login': (context) => const LoginScreen(),
},
);When initialRoute is used, do not also define a home property for the same route configuration.
onGenerateRoute allows an application to create routes dynamically based on RouteSettings.
MaterialApp(
onGenerateRoute: (settings) {
switch (settings.name) {
case '/':
return MaterialPageRoute(
builder: (context) => const HomeScreen(),
);
case '/profile':
return MaterialPageRoute(
builder: (context) => const ProfileScreen(),
);
case '/settings':
return MaterialPageRoute(
builder: (context) => const SettingsScreen(),
);
default:
return MaterialPageRoute(
builder: (context) => const NotFoundScreen(),
);
}
},
);
This approach provides a central location for route-generation logic.
Applications can provide a fallback route when a requested route does not exist.
MaterialApp(
routes: {
'/': (context) => const HomeScreen(),
'/profile': (context) => const ProfileScreen(),
},
onUnknownRoute: (settings) {
return MaterialPageRoute(
builder: (context) => const NotFoundScreen(),
);
},
);class NotFoundScreen extends StatelessWidget {
const NotFoundScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Page Not Found'),
),
body: const Center(
child: Text(
'The requested page could not be found.',
),
),
);
}
}
Route management often involves passing information from one screen to another. For example, a Product List screen can send a selected Product object to a Product Details screen.
class Product {
final int id;
final String name;
final double price;
const Product({
required this.id,
required this.name,
required this.price,
});
}
final product = Product(
id: 1,
name: 'Flutter Course',
price: 4999,
);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductDetailsScreen(
product: product,
),
),
);
class ProductDetailsScreen extends StatelessWidget {
final Product product;
const ProductDetailsScreen({
super.key,
required this.product,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(product.name),
),
body: Text(
'Price: ₹${product.price}',
),
);
}
}
Passing data through a constructor is a straightforward approach when directly creating the destination route.
When using named routes, data can be passed through the arguments parameter.
Navigator.pushNamed(
context,
'/product',
arguments: product,
);The destination can retrieve the object from the current route:
final product =
ModalRoute.of(context)!.settings.arguments as Product;Flutter's navigation cookbook documents this pattern for passing arguments to named routes.
A route can return data when it is closed.
Navigator.pop(
context,
'Order completed',
);final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const CheckoutScreen(),
),
);
if (result != null) {
print(result);
}
This technique is useful when a child screen performs an action and needs to communicate the result back to the previous screen.
Sometimes a screen should be replaced instead of being added on top of the current screen. Flutter provides pushReplacement() for this purpose.
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => const HomeScreen(),
),
);Login Screen
↓
pushReplacement()
↓
Home ScreenThe Login route is replaced by the Home route.
When using named routes, the current route can be replaced using pushReplacementNamed().
Navigator.pushReplacementNamed(
context,
'/home',
);This is useful when the current route should not remain immediately underneath the newly opened route.
pushAndRemoveUntil() allows you to push a new route and remove previous routes based on a condition.
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => const HomeScreen(),
),
(route) => false,
);The condition (route) => false removes all previous routes from the stack.
For named routes, use pushNamedAndRemoveUntil().
Navigator.pushNamedAndRemoveUntil(
context,
'/home',
(route) => false,
);This can be useful after completing an authentication or checkout flow when earlier screens should no longer remain in the navigation history.
popUntil() removes routes from the stack until a condition becomes true.
Navigator.popUntil(
context,
(route) => route.isFirst,
);This returns the navigation stack to its first route.
Home
↓
Products
↓
Details
↓
CheckoutAfter:
Navigator.popUntil(
context,
(route) => route.isFirst,
);The stack returns to:
HomeBefore removing the current route, you can check whether the Navigator has a previous route available.
if (Navigator.canPop(context)) {
Navigator.pop(context);
}This can be useful when a widget can appear in different navigation contexts.
Authentication is one of the most common situations where route management is important.
Login
↓
Successful Authentication
↓
HomeYou can replace Login with Home:
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => const HomeScreen(),
),
);Home
↓
Logout
↓
LoginYou can clear the previous navigation history:
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => const LoginScreen(),
),
(route) => false,
);Consider an e-commerce application with the following screens:
Home
Products
Product Details
Cart
Checkout
Order SuccessA possible route flow is:
Home
↓
Products
↓
Product Details
↓
Cart
↓
Checkout
↓
Order SuccessAfter a successful order, the application may navigate to Order Success and remove previous checkout routes if the desired user flow requires it.
As an application grows, keeping every route definition inside main.dart can make the file difficult to maintain. A common organizational approach is to separate route names and route configuration.
lib/
├── main.dart
├── routes/
│ ├── app_routes.dart
│ └── app_router.dart
├── screens/
│ ├── home_screen.dart
│ ├── login_screen.dart
│ ├── profile_screen.dart
│ └── settings_screen.dart
└── models/
└── product.dartclass AppRoutes {
static const home = '/';
static const login = '/login';
static const profile = '/profile';
static const settings = '/settings';
static const products = '/products';
}This separation keeps route names organized and makes them easier to reuse.
A centralized route configuration can contain the route-building logic.
class AppRouter {
static Route<dynamic> generateRoute(
RouteSettings settings,
) {
switch (settings.name) {
case AppRoutes.home:
return MaterialPageRoute(
builder: (_) => const HomeScreen(),
);
case AppRoutes.login:
return MaterialPageRoute(
builder: (_) => const LoginScreen(),
);
case AppRoutes.profile:
return MaterialPageRoute(
builder: (_) => const ProfileScreen(),
);
default:
return MaterialPageRoute(
builder: (_) => const NotFoundScreen(),
);
}
}
}
Then use it in MaterialApp:
MaterialApp(
initialRoute: AppRoutes.home,
onGenerateRoute: AppRouter.generateRoute,
);A Drawer can provide navigation links to different application sections.
Drawer(
child: ListView(
children: [
const DrawerHeader(
child: Text('Application Menu'),
),
ListTile(
leading: const Icon(Icons.home),
title: const Text('Home'),
onTap: () {
Navigator.pushNamed(context, '/');
},
),
ListTile(
leading: const Icon(Icons.person),
title: const Text('Profile'),
onTap: () {
Navigator.pushNamed(context, '/profile');
},
),
ListTile(
leading: const Icon(Icons.settings),
title: const Text('Settings'),
onTap: () {
Navigator.pushNamed(context, '/settings');
},
),
],
),
)In a real application, the drawer state and route stack should be designed together so that selecting menu items does not create unnecessary duplicate routes.
Dialogs also participate in the navigation system.
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('Delete Item'),
content: const Text(
'Are you sure you want to delete this item?',
),
actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Cancel'),
),
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Delete'),
),
],
);
},
);Calling Navigator.pop(context) closes the dialog route.
Some applications contain independent navigation areas. For example, a dashboard may have separate navigation stacks for Home, Search, and Profile sections.
A simplified nested navigation structure may look like:
Root Navigator
│
├── Home Navigator
│ ├── Home
│ └── Home Details
│
├── Search Navigator
│ ├── Search
│ └── Search Details
│
└── Profile Navigator
├── Profile
└── Account SettingsNested navigation requires careful management of which Navigator a BuildContext refers to. Advanced applications often use a routing solution designed for multiple navigators and deep linking.
Deep linking allows an external URI or URL to open a specific location inside an application.
For example:
https://example.com/products/101The application could use the path to identify Product 101.
Flutter supports deep links on Android, iOS, and web. For applications with specific deep-linking and advanced navigation requirements, Flutter's documentation recommends Router-based navigation or a routing package such as go_router.
Flutter's Router system provides a declarative approach to managing application navigation.
It is particularly relevant for applications that need:
Flutter's navigation documentation explains that applications with advanced navigation and routing requirements can use a routing package such as go_router.
go_router is a routing package maintained by the Flutter team and provides an API for handling complex routing scenarios.
flutter pub add go_routerimport 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
final GoRouter router = GoRouter(
routes: [
GoRoute(
path: '/',
builder: (context, state) {
return const HomeScreen();
},
),
GoRoute(
path: '/profile',
builder: (context, state) {
return const ProfileScreen();
},
),
],
);
void main() {
runApp(
MaterialApp.router(
routerConfig: router,
),
);
}
context.go('/profile');Flutter's current navigation documentation uses go_router for examples involving more advanced routing and deep-link scenarios.
| Feature | Navigator | Named Routes | Router / go_router |
|---|---|---|---|
| Basic navigation | Yes | Yes | Yes |
| Stack-based navigation | Yes | Yes | Works with Navigator |
| Simple screen navigation | Yes | Yes | Yes |
| Deep linking | Basic scenarios | Limited customization | Designed for advanced scenarios |
| Web URL synchronization | Limited by itself | Limited | Supported |
| Browser back/forward | Not the complete URL-history solution | Limited | Supported through Router-based navigation |
| Complex routing | Can require additional structure | Can become difficult to manage | Provides routing configuration |
| Typical API | push(), pop() | pushNamed() | GoRouter |
pushReplacement() when a previous route should be replaced.pushAndRemoveUntil() when previous navigation history should be cleared.popUntil() when you need to return to a specific point in the navigation stack.go_router.Navigator.pushNamed(
context,
'/dashboard',
);If /dashboard is not registered or generated, the route cannot be resolved correctly.
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const HomeScreen(),
),
);If this is called repeatedly when the intention is to switch to an existing application section, it can create unnecessary stack entries.
For example, after authentication, repeatedly pushing Home on top of Login can leave Login underneath. Use route replacement when the previous route should not remain available through back navigation.
Using:
Navigator.pushAndRemoveUntil(
context,
route,
(route) => false,
);removes all previous routes. Use this only when that navigation behavior is actually required.
When using route arguments, make sure the receiving screen expects the same type that was sent.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class AppRoutes {
static const home = '/';
static const login = '/login';
static const profile = '/profile';
static const settings = '/settings';
static const products = '/products';
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Application Route Management',
initialRoute: AppRoutes.home,
routes: {
AppRoutes.home: (context) => const HomeScreen(),
AppRoutes.login: (context) => const LoginScreen(),
AppRoutes.profile: (context) => const ProfileScreen(),
AppRoutes.settings: (context) => const SettingsScreen(),
AppRoutes.products: (context) => const ProductsScreen(),
},
onUnknownRoute: (settings) {
return MaterialPageRoute(
builder: (context) => const NotFoundScreen(),
);
},
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.pushNamed(
context,
AppRoutes.profile,
);
},
child: const Text('Profile'),
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(
context,
AppRoutes.products,
);
},
child: const Text('Products'),
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(
context,
AppRoutes.settings,
);
},
child: const Text('Settings'),
),
ElevatedButton(
onPressed: () {
Navigator.pushReplacementNamed(
context,
AppRoutes.login,
);
},
child: const Text('Logout'),
),
],
),
),
);
}
}
class LoginScreen extends StatelessWidget {
const LoginScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Login'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pushReplacementNamed(
context,
AppRoutes.home,
);
},
child: const Text('Login'),
),
),
);
}
}
class ProfileScreen extends StatelessWidget {
const ProfileScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Profile'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Back'),
),
),
);
}
}
class ProductsScreen extends StatelessWidget {
const ProductsScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Products'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Back'),
),
),
);
}
}
class SettingsScreen extends StatelessWidget {
const SettingsScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Settings'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Back'),
),
),
);
}
}
class NotFoundScreen extends StatelessWidget {
const NotFoundScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Page Not Found'),
),
body: const Center(
child: Text(
'The requested route does not exist.',
),
),
);
}
}
AppRoutes contains centralized route names.MaterialApp registers the application's named routes.initialRoute starts the application at the Home route.Navigator.pushNamed() opens Profile, Products, and Settings.Navigator.pop() returns from secondary screens.Navigator.pushReplacementNamed() replaces the current route during the login/logout flow.onUnknownRoute provides a fallback page for an unknown route. ┌──────────────┐
│ Login Screen │
└──────┬───────┘
│
Login Success
│
↓
┌──────────────┐
│ Home Screen │
└──────┬───────┘
│
┌──────────────┼──────────────┐
↓ ↓ ↓
┌─────────┐ ┌──────────┐ ┌──────────┐
│ Profile │ │ Products │ │ Settings │
└─────────┘ └────┬─────┘ └──────────┘
│
↓
Product Details
│
↓
Cart
│
↓
Checkout| Requirement | Possible Approach |
|---|---|
| Simple screen-to-screen navigation | Navigator.push() and Navigator.pop() |
| Existing application using named routes | Named routes |
| Passing strongly typed data directly to a screen | Route object with constructor parameters |
| Replace Login with Home | pushReplacement() |
| Clear previous navigation history | pushAndRemoveUntil() |
| Return to a particular route | popUntil() |
| Advanced deep linking | Router or routing package |
| Web URL and browser history integration | Router-based navigation or routing package |
| Complex application routing | Router or a routing package such as go_router |
Route management is the process of organizing and controlling navigation between different screens or pages in a Flutter application.
Navigator manages a stack of routes and provides methods for adding, removing, replacing, and manipulating routes.
push() adds a route to the navigation stack, while pop() removes the current route.
It can be used when the current route should be replaced by another route rather than remaining underneath it.
It pushes a new route and removes previous routes according to a supplied condition.
It removes routes from the stack until a specified condition is satisfied.
Data can be passed through constructor parameters when directly creating a route, or through route arguments when using named routes.
onGenerateRoute is a callback that dynamically creates a route based on the requested RouteSettings.
It provides a fallback route when a requested route cannot be resolved.
Deep linking allows an external URI or URL to navigate directly to a particular location within an application.
Flutter provides Router-based navigation, and routing packages such as go_router can be used for advanced requirements including deep linking and web URL synchronization.
AppRoutes class containing route constants.Navigator.pushNamed().Navigator.pop().pushReplacement().pushAndRemoveUntil().onUnknownRoute.popUntil() to return to the first route.onGenerateRoute.go_router configuration for Home and Details screens.| Concept | Purpose | Example |
|---|---|---|
| Route | Represents a screen/page | MaterialPageRoute |
| Navigator | Manages route stack | Navigator |
| push() | Add a route | Navigator.push() |
| pop() | Remove current route | Navigator.pop() |
| pushReplacement() | Replace current route | Navigator.pushReplacement() |
| pushAndRemoveUntil() | Push and remove previous routes | Navigator.pushAndRemoveUntil() |
| popUntil() | Pop routes until a condition | Navigator.popUntil() |
| Named route | Identify route by name | /profile |
| onGenerateRoute | Create routes dynamically | onGenerateRoute |
| onUnknownRoute | Fallback for unknown routes | onUnknownRoute |
| Router | Declarative/advanced routing system | Router |
| go_router | Routing package for advanced navigation | GoRouter |
push() adds a route to the stack.pop() removes the current route.pushReplacement() replaces the current route.pushAndRemoveUntil() can remove previous routes while navigating.popUntil() can return the user to a particular point in the navigation stack.onGenerateRoute can centralize dynamic route creation.onUnknownRoute can provide a fallback screen.go_router.For more information about Flutter development and professional training, visit the following resources:
