Flutter - Navigare con route denominate (named route)

Nella pagina Flutter - Navigare verso una nuova schermata e tornare indietro abbiamo visto come navigare verso una nuova schermata creando una nuova route e spingendola sul Navigator.

Tuttavia, se è necessario passare alla stessa schermata in molte parti dell'app, questo approccio può portare ad una ridondante duplicazione di codice. La soluzione consiste nel definire una route denominata (named route) e utilizzare la route denominata per la navigazione.

Per utilizzare le route denominate, possiamo usare la funzione Navigator.pushNamed(). Questo esempio replica l’esempio fatto precedentemente, dimostrando come utilizzare le named route utilizzando i seguenti passaggi:

1. Creiamo due schermate

Per prima cosa creiamo due schermate con cui lavorare. La prima schermata contiene un pulsante che consente di accedere alla seconda schermata. La seconda schermata contiene un pulsante che torna alla prima.

            
import 'package:flutter/material.dart';

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

2. Definiamo le route

Successivamente, definiamo le route fornendo proprietà aggiuntive al costruttore MaterialApp: initialRoute e le route stesse.

La proprietà initialRoute definisce con quale route deve iniziare l'app. La proprietà route definisce le route denominate disponibili e i widget da creare durante la navigazione verso tali route.

         
MaterialApp(
    title: 'Demo Route Denominate',
    // Start the app with the "/" named route. In this case, the app starts Avvia l'app con la route denominata "/". In questo caso l'app si avvia con il widget PrimaSchermata
    initialRoute: '/',
    routes: {
        // Quando si naviga verso la route "/", costruisci il widget PrimaSchermata
        '/': (context) => const PrimaSchermata(),
        // Quando si naviga verso la route "/seconda", costruisci il widget SecondaSchermata
        '/seconda': (context) => const SecondaSchermata(),
    },
)

3. Navighiamo verso la seconda schermata

Con i widget e le route in atto, attiviamo la navigazione utilizzando il metodo Navigator.pushNamed(). Questo metodo comunica a Flutter di costruire il widget definito nella tabella dei percorsi e di avviare la schermata.

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

         
// Nel widget `PrimaSchermata`  
onPressed: () {
    // Naviga verso la seconda schermata utilizzando una route denominata
    Navigator.pushNamed(context, '/seconda');
}

4. Torniamo alla prima schermata

Per tornare alla prima schermata, utilizziamo la funzione Navigator.pop().

    
// Nel widget SecondaSchermata
onPressed: () {
    // Naviga indietro verso la prima schermata eliminando la route attuale dallo stack
    Navigator.pop(context);
 }

Potete trovare il codice completo su Github