[{"data":1,"prerenderedAt":85},["ShallowReactive",2],{"tutorial-navigator-in-flutter-aprire-e-chiudere-schermate-con-push-e-pop":3,"comments-tutorial-navigator-in-flutter-aprire-e-chiudere-schermate-con-push-e-pop":84},{"id":4,"title":5,"slug":6,"excerpt":7,"intro":8,"cover_image":9,"cover_remote_url":10,"cover_credit":11,"video_url":15,"video":16,"difficulty":20,"estimated_minutes":21,"flutter_version":22,"status":23,"published_at":24,"meta_title":25,"meta_description":26,"category":27,"author":31,"steps":33},125,"Navigator in Flutter: aprire e chiudere schermate con push e pop","navigator-in-flutter-aprire-e-chiudere-schermate-con-push-e-pop","Impara a navigare tra due schermate in Flutter usando Navigator.push e Navigator.pop, con rotte nominate e pulsante indietro personalizzato.","La **navigazione** è uno dei primi concetti che serve padroneggiare quando si costruisce un'app Flutter: quasi ogni applicazione ha più di una schermata.\n\nIn Flutter le schermate si chiamano **route** e vengono gestite da un widget chiamato `Navigator`, che funziona come una **pila** (stack): `push` mette una nuova schermata in cima, `pop` la toglie tornando a quella precedente.\n\nIn questo tutorial per principianti costruiremo una piccola app con due schermate: una Home con un pulsante e una schermata di dettaglio. Vedremo `MaterialPageRoute`, le **rotte nominate** e come personalizzare il tasto indietro.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Ftutorials\u002Fe4808de3-479c-4095-8d9f-79ba3e70d852.jpg","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1609444074490-a4eb06f5ebf0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w5NzA2NTJ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3OTIwMzg3MTl8&ixlib=rb-4.1.0&q=80&w=1080",{"name":12,"author_url":13,"photo_url":14},"Clay Banks","https:\u002F\u002Funsplash.com\u002F@claybanks","https:\u002F\u002Funsplash.com\u002Fphotos\u002Fperson-driving-car-during-daytime-DXM34qdbOEc","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=ayAaxEwRq2c",{"youtube_id":17,"duration_seconds":18,"published_at":19},"ayAaxEwRq2c",99,"2026-10-15T09:32:06+00:00","beginner",25,"3.x","published","2026-10-15T04:32:00+00:00","Navigator Flutter: push e pop tra schermate","Guida base alla navigazione in Flutter: Navigator.push, Navigator.pop, MaterialPageRoute e rotte nominate con esempi di codice commentati.",{"id":28,"name":29,"slug":30},1,"Guide","guide",{"id":28,"name":32},"Flutter Bot",[34,42,49,56,63,70,77],{"id":35,"position":28,"title":36,"body":37,"code_snippet":38,"code_language":39,"expected_result":40,"demo_url":41,"video_url":41},835,"Creare il progetto e la struttura di base","Crea un nuovo progetto e apri `lib\u002Fmain.dart`. Partiamo da una `MaterialApp` con una semplice schermata Home.\n\nIl widget `MaterialApp` crea automaticamente un `Navigator` interno: non dobbiamo configurarlo a mano.","import 'package:flutter\u002Fmaterial.dart';\n\nvoid main() => runApp(const MyApp());\n\nclass MyApp extends StatelessWidget {\n  const MyApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Demo Navigator',\n      theme: ThemeData(colorSchemeSeed: Colors.indigo),\n      home: const HomePage(),\n    );\n  }\n}\n\nclass HomePage extends StatelessWidget {\n  const HomePage({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: const Text('Home')),\n      body: const Center(child: Text('Prima schermata')),\n    );\n  }\n}","dart","L'app si avvia mostrando una AppBar con titolo \"Home\" e il testo \"Prima schermata\".",null,{"id":43,"position":44,"title":45,"body":46,"code_snippet":47,"code_language":39,"expected_result":48,"demo_url":41,"video_url":41},836,2,"Creare la seconda schermata","Aggiungiamo una seconda schermata, `DettaglioPage`. È un normale `StatelessWidget` con il suo `Scaffold`: in Flutter una schermata non è nulla di speciale, è solo un widget.\n\nPuoi scriverla in fondo a `main.dart` oppure, meglio, in un file separato `lib\u002Fdettaglio_page.dart`.","class DettaglioPage extends StatelessWidget {\n  const DettaglioPage({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: const Text('Dettaglio')),\n      body: const Center(\n        child: Text('Seconda schermata'),\n      ),\n    );\n  }\n}","Il codice compila senza errori. La schermata non è ancora raggiungibile.",{"id":50,"position":51,"title":52,"body":53,"code_snippet":54,"code_language":39,"expected_result":55,"demo_url":41,"video_url":41},837,3,"Aprire la schermata con Navigator.push","Ora colleghiamo le due schermate. Nel `body` della Home mettiamo un `ElevatedButton` che chiama `Navigator.push`.\n\n`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(\n  child: ElevatedButton(\n    onPressed: () {\n      Navigator.push(\n        context,\n        MaterialPageRoute(\n          builder: (context) => const DettaglioPage(),\n        ),\n      );\n    },\n    child: const Text('Vai al dettaglio'),\n  ),\n),","Toccando il pulsante si apre la schermata Dettaglio con un'animazione di scorrimento; la AppBar mostra automaticamente la freccia indietro.",{"id":57,"position":58,"title":59,"body":60,"code_snippet":61,"code_language":39,"expected_result":62,"demo_url":41,"video_url":41},838,4,"Tornare indietro con Navigator.pop","La freccia indietro nella AppBar chiama già `Navigator.pop` per noi. Possiamo però tornare indietro anche da un pulsante nel corpo della pagina.\n\n`Navigator.pop(context)` rimuove la rotta in cima alla pila: attenzione a non chiamarlo sulla prima schermata, perché svuoterebbe lo stack.","body: Center(\n  child: Column(\n    mainAxisAlignment: MainAxisAlignment.center,\n    children: [\n      const Text('Seconda schermata'),\n      const SizedBox(height: 16),\n      OutlinedButton(\n        onPressed: () => Navigator.pop(context),\n        child: const Text('Torna indietro'),\n      ),\n    ],\n  ),\n),","Dal Dettaglio, il pulsante \"Torna indietro\" riporta alla Home esattamente come la freccia della AppBar.",{"id":64,"position":65,"title":66,"body":67,"code_snippet":68,"code_language":39,"expected_result":69,"demo_url":41,"video_url":41},839,5,"Usare le rotte nominate","Quando le schermate aumentano, conviene dichiarare le rotte in un unico punto con `routes` e aprirle con `Navigator.pushNamed`.\n\nCon `initialRoute` indichiamo quale rotta mostrare all'avvio (al posto di `home`).","MaterialApp(\n  initialRoute: '\u002F',\n  routes: {\n    '\u002F': (context) => const HomePage(),\n    '\u002Fdettaglio': (context) => const DettaglioPage(),\n  },\n);\n\n\u002F\u002F Nella HomePage:\nElevatedButton(\n  onPressed: () => Navigator.pushNamed(context, '\u002Fdettaglio'),\n  child: const Text('Vai al dettaglio'),\n);","La navigazione funziona come prima, ma i percorsi sono centralizzati e più leggibili.",{"id":71,"position":72,"title":73,"body":74,"code_snippet":75,"code_language":39,"expected_result":76,"demo_url":41,"video_url":41},840,6,"Personalizzare il tasto indietro","Puoi sostituire la freccia automatica con un widget tuo usando `leading` nella `AppBar`. È utile, ad esempio, per chiedere conferma prima di uscire.\n\nUn metodo comodo è `Navigator.maybePop(context)`: esegue il pop solo se è possibile, evitando errori.","appBar: AppBar(\n  title: const Text('Dettaglio'),\n  leading: IconButton(\n    icon: const Icon(Icons.close),\n    tooltip: 'Chiudi',\n    onPressed: () => Navigator.maybePop(context),\n  ),\n),","La AppBar del Dettaglio mostra una X al posto della freccia; premendola si torna alla Home.",{"id":78,"position":79,"title":80,"body":81,"code_snippet":82,"code_language":39,"expected_result":83,"demo_url":41,"video_url":41},841,7,"Verificare lo stack e ricapitolare","Per capire se ci sono rotte sotto quella corrente usa `Navigator.canPop(context)`: restituisce `false` sulla prima schermata.\n\n**Ricapitolando:**\n\n- `Navigator.push` → apre una nuova schermata\n- `Navigator.pop` → chiude quella corrente\n- `MaterialPageRoute` → definisce la rotta e l'animazione\n- `routes` + `pushNamed` → rotte nominate centralizzate\n\nProssimo passo: passare dati tra le schermate tramite il costruttore e ricevere un risultato da `pop`.","if (Navigator.canPop(context)) {\n  Navigator.pop(context);\n} else {\n  ScaffoldMessenger.of(context).showSnackBar(\n    const SnackBar(content: Text('Sei già nella prima schermata')),\n  );\n}","L'app naviga correttamente avanti e indietro senza errori in console.",[],1792316903994]