Navigator in Flutter: aprire e chiudere schermate con push e pop

Crea un nuovo progetto e apri lib/main.dart. Partiamo da una MaterialApp con una semplice schermata Home.

Il widget MaterialApp crea automaticamente un Navigator interno: non dobbiamo configurarlo a mano.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo Navigator',
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: const Center(child: Text('Prima schermata')),
    );
  }
}

Aggiungiamo una seconda schermata, DettaglioPage. È un normale StatelessWidget con il suo Scaffold: in Flutter una schermata non è nulla di speciale, è solo un widget.

Puoi scriverla in fondo a main.dart oppure, meglio, in un file separato lib/dettaglio_page.dart.

class DettaglioPage extends StatelessWidget {
  const DettaglioPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dettaglio')),
      body: const Center(
        child: Text('Seconda schermata'),
      ),
    );
  }
}

Ora colleghiamo le due schermate. Nel body della Home mettiamo un ElevatedButton che chiama Navigator.push.

MaterialPageRoute descrive la rotta e fornisce l'animazione di transizione tipica della piattaforma. Il parametro builder riceve il BuildContext e restituisce il widget da mostrare.

body: Center(
  child: ElevatedButton(
    onPressed: () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => const DettaglioPage(),
        ),
      );
    },
    child: const Text('Vai al dettaglio'),
  ),
),

La freccia indietro nella AppBar chiama già Navigator.pop per noi. Possiamo però tornare indietro anche da un pulsante nel corpo della pagina.

Navigator.pop(context) rimuove la rotta in cima alla pila: attenzione a non chiamarlo sulla prima schermata, perché svuoterebbe lo stack.

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      const Text('Seconda schermata'),
      const SizedBox(height: 16),
      OutlinedButton(
        onPressed: () => Navigator.pop(context),
        child: const Text('Torna indietro'),
      ),
    ],
  ),
),

Quando le schermate aumentano, conviene dichiarare le rotte in un unico punto con routes e aprirle con Navigator.pushNamed.

Con initialRoute indichiamo quale rotta mostrare all'avvio (al posto di home).

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => const HomePage(),
    '/dettaglio': (context) => const DettaglioPage(),
  },
);

// Nella HomePage:
ElevatedButton(
  onPressed: () => Navigator.pushNamed(context, '/dettaglio'),
  child: const Text('Vai al dettaglio'),
);

Puoi sostituire la freccia automatica con un widget tuo usando leading nella AppBar. È utile, ad esempio, per chiedere conferma prima di uscire.

Un metodo comodo è Navigator.maybePop(context): esegue il pop solo se è possibile, evitando errori.

appBar: AppBar(
  title: const Text('Dettaglio'),
  leading: IconButton(
    icon: const Icon(Icons.close),
    tooltip: 'Chiudi',
    onPressed: () => Navigator.maybePop(context),
  ),
),

Per capire se ci sono rotte sotto quella corrente usa Navigator.canPop(context): restituisce false sulla prima schermata.

Ricapitolando:

• Navigator.push → apre una nuova schermata
• Navigator.pop → chiude quella corrente
• MaterialPageRoute → definisce la rotta e l'animazione
• routes + pushNamed → rotte nominate centralizzate

Prossimo passo: passare dati tra le schermate tramite il costruttore e ricevere un risultato da pop.

if (Navigator.canPop(context)) {
  Navigator.pop(context);
} else {
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(content: Text('Sei già nella prima schermata')),
  );
}