Flutter - Navigare verso una nuova schermata e tornare indietro

La maggior parte delle app contiene diverse schermate per la visualizzazione di diversi tipi di informazioni. Ad esempio, un'app potrebbe avere uno schermo che mostra i prodotti. Quando l'utente tocca l'immagine di un prodotto, una nuova schermata mostra i dettagli del prodotto.

In Android, una route è equivalente a una Activity. In iOS, una route è equivalente a un ViewController. In Flutter, una route è un widget.

Di seguito mostriamo come navigare tra due route, utilizzando questi passaggi:

1. Creiamo due route

Innanzitutto, creiamo due route con cui lavorare. Poiché questo è un esempio di base, ogni route contiene un solo pulsante. Toccando il pulsante sulla prima route si passa alla seconda route. Toccando il pulsante sulla seconda route si torna alla prima route.

Per prima cosa impostiamo la struttura visuale:

            
class PrimaRoute extends StatelessWidget {
    const PrimaRoute({Key? key}) : super(key: key);
                  
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Prima Route'),
            ),
            body: Center(
                child: ElevatedButton(
                    child: Text('Naviga verso la seconda route'),
                    onPressed: () {
                        // Naviga verso la seconda route se premuto.
                    },
                ),
            ),
        );
    }
}
                  
class SecondaRoute extends StatelessWidget {
    const SecondaRoute({Key? key}) : super(key: key);
                  
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text("Seconda Route"),
            ),
            body: Center(
                child: ElevatedButton(
                    onPressed: () {
                        // Naviga indietro verso la prima route se premuto.
                    },
                    child: Text('Torna indietro'),
                ),
            ),
        );
    }
}

2. Navigate verso la seconda route utilizzando Navigator.push()

Per passare a una nuova route, utilizziamo il metodo Navigator.push(). Il metodo push() aggiunge una Route allo stack di route gestite dal Navigator. Da dove viene la route? Puoi crearne una tua o utilizzare un MaterialPageRoute, che è utile perché naviga verso la nuova route utilizzando un'animazione specifica della piattaforma.

Nel metodo build() del widget FirstRoute, aggiorna la callback onPressed():

         
// Nel widget `PrimaRoute` 
onPressed: () {
    Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => SecondaRoute()),
    );
}

3. Torniamo alla prima route usando Navigator.pop()

Come si fa a chiudere la seconda route e tornare alla prima? Usando il metodo Navigator.pop(). Il metodo pop() rimuove la route corrente dallo stack di route gestite dal Navigator.

Per implementare un ritorno alla route originale, aggiorna la callback onPressed() nel widget SecondaRoute:

         
// Nel widget SecondaRoute 
onPressed: () {
    Navigator.pop(context);
}

Potete trovare il codice completo su Github