Come funziona la navigazione in Flutter?

Question

Accepted Answer

**Navigation** in Flutter sposta tra schermate (pagine/route) — usando **Navigator** (uno stack di route) per la navigazione di base, o pacchetti di routing dichiarativo per app più complesse. Comprendere la navigazione è essenziale per costruire app multi-schermata.

## Navigazione di base con Navigator (uno 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
```

## Passare dati tra schermate

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

## Route nominati e routing 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
```

## Perché è importante

Comprendere la navigazione è essenziale perché **la maggior parte delle app ha più schermate**, e muoversi tra loro è fondamentale per la funzionalità dell'app, quindi è una conoscenza imprescindibile di Flutter.

Il concetto centrale — **Navigator di Flutter che gestisce uno stack di route** (schermate), dove **pushy** per navigare avanti (aggiungendo una schermata in cima) e **pop** per tornare indietro (rimuovendo la schermata in cima) — è il modello mentale fondamentale per la navigazione, e la metafora dello stack (che corrisponde a come gli utenti navigano avanti e indietro attraverso un'app) la rende intuitiva.

Comprendere la **navigazione di base** (push/pop) è necessario per qualsiasi app multi-schermata.

Comprendere il **passaggio di dati tra schermate** (inviare dati avanti tramite costruttori e restituire risultati quando si fa pop, poiché push restituisce un Future) è essenziale perché le schermate comunemente devono condividere dati (passare un elemento a una schermata di dettaglio, restituire una selezione).

Comprendere le **route nominate** (definire route per nome per un'organizzazione più pulita con molte schermate) e soprattutto il **routing dichiarativo moderno** (pacchetti come **go_router**, consigliato per app non banali, fornendo routing basato su URL, deep linking, supporto web e navigazione nidificata) riflette le best practice attuali — man mano che le app crescono, il routing dichiarativo gestisce la complessità meglio di push/pop imperativo.

Poiché praticamente tutte le app hanno più schermate e navigare tra loro (con passaggio di dati) è fondamentale per la funzionalità dell'app, e poiché comprendere il modello stack di Navigator, il passaggio di dati e il routing moderno (go_router) è necessario per costruire app multi-schermata, comprendere la navigazione in Flutter è una conoscenza essenziale e fondamentale — una capacità centrale necessaria in quasi tutte le app Flutter e necessaria per costruire le esperienze multi-schermata che le applicazioni reali richiedono.