How does navigation work in Flutter?

Question

Accepted Answer

**Navigation** in Flutter moves between screens (pages/routes) — using the **Navigator** (a stack of routes) for basic navigation, or declarative routing packages for more complex apps. Understanding navigation is essential for building multi-screen apps.

## Basic navigation with Navigator (a stack)

```dart
// the Navigator manages a STACK of routes (screens)
// PUSH a new screen onto the stack (navigate to it)
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

// POP — go back (remove the top screen, return to the previous)
Navigator.pop(context);
```

```text
Think of navigation as a STACK of screens:
  → PUSH adds a screen on top (navigate forward)
  → POP removes the top screen (go back)
  → the back button / gesture also pops
```

## Passing data between screens

```dart
// pass data forward (via the constructor)
Navigator.push(context, MaterialPageRoute(
  builder: (context) => DetailScreen(itemId: 42),
));

// return data back when popping
Navigator.pop(context, result);          // return a result
final result = await Navigator.push(...); // receive it (push returns a Future)
```

## Named routes and modern routing

```dart
// NAMED routes — define routes by name (cleaner for many screens)
Navigator.pushNamed(context, '/details');
// configured in MaterialApp(routes: {...})

// MODERN: declarative routing packages (go_router) for complex apps:
//   → URL-based routing, deep linking, web support, nested navigation
//   → go_router is the recommended approach for non-trivial apps
```

## Why it matters

Understanding navigation is essential because **most apps have multiple screens**, and moving between them is fundamental to app functionality, so it's must-know Flutter knowledge.

The core concept — Flutter's **Navigator managing a stack of routes** (screens), where you **push** to navigate forward (adding a screen on top) and **pop** to go back (removing the top screen) — is the foundational mental model for navigation, and the stack metaphor (matching how users navigate forward and back through an app) makes it intuitive.

Understanding **basic navigation** (push/pop) is necessary for any multi-screen app.

Understanding **passing data between screens** (sending data forward via constructors and returning results when popping, since push returns a Future) is essential because screens commonly need to share data (passing an item to a detail screen, returning a selection).

Understanding **named routes** (defining routes by name for cleaner organization with many screens) and especially **modern declarative routing** (packages like **go_router**, which is recommended for non-trivial apps, providing URL-based routing, deep linking, web support, and nested navigation) reflects current best practices — as apps grow, declarative routing handles complexity better than imperative push/pop.

Since virtually all apps have multiple screens and navigating between them (with data passing) is fundamental to app functionality, and since understanding the Navigator stack model, data passing, and modern routing (go_router) is necessary to build multi-screen apps, understanding navigation in Flutter is essential, foundational knowledge — a core capability needed in nearly every Flutter app and necessary for building the multi-screen experiences that real applications require.