¿Cómo funciona la navegación en Flutter?

Question

Accepted Answer

**Navigation** en Flutter permite moverse entre pantallas (páginas/rutas) — usando el **Navigator** (una pila de rutas) para navegación básica, o paquetes de enrutamiento declarativo para apps más complejas. Entender la navegación es esencial para construir apps multi-pantalla.

## Navegación básica con Navigator (una pila)

```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
```

## Pasar datos entre pantallas

```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)
```

## Rutas nombradas y enrutamiento moderno

```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
```

## Por qué es importante

Entender la navegación es esencial porque **la mayoría de las apps tienen múltiples pantallas**, y moverse entre ellas es fundamental para la funcionalidad de la app, por lo que es conocimiento imprescindible en Flutter.

El concepto central — el **Navigator de Flutter gestionando una pila de rutas** (pantallas), donde **push** navega hacia adelante (agregando una pantalla encima) y **pop** regresa (removiendo la pantalla superior) — es el modelo mental fundamental para la navegación, y la metáfora de pila (coincidiendo con cómo los usuarios navegan hacia adelante y atrás a través de una app) la hace intuitiva.

Entender **navegación básica** (push/pop) es necesario para cualquier app multi-pantalla.

Entender **pasar datos entre pantallas** (enviar datos hacia adelante vía constructores y retornar resultados al hacer pop, ya que push retorna un Future) es esencial porque las pantallas comúnmente necesitan compartir datos (pasar un elemento a una pantalla de detalle, retornar una selección).

Entender **rutas nombradas** (definir rutas por nombre para organización más limpia con muchas pantallas) y especialmente **enrutamiento declarativo moderno** (paquetes como **go_router**, que se recomienda para apps no triviales, proporcionando enrutamiento basado en URL, deep linking, soporte web y navegación anidada) refleja las mejores prácticas actuales — conforme las apps crecen, el enrutamiento declarativo maneja la complejidad mejor que push/pop imperativo.

Ya que prácticamente todas las apps tienen múltiples pantallas y navegar entre ellas (con paso de datos) es fundamental para la funcionalidad de la app, y ya que entender el modelo de pila del Navigator, paso de datos y enrutamiento moderno (go_router) es necesario para construir apps multi-pantalla, entender la navegación en Flutter es conocimiento esencial y fundamental — una capacidad central necesaria en casi todas las apps Flutter y necesaria para construir las experiencias multi-pantalla que las aplicaciones reales requieren.