[{"data":1,"prerenderedAt":22},["ShallowReactive",2],{"articolo-navigazione-dichiarativa-in-flutter-con-go-router-guida-pratica":3,"comments-article-navigazione-dichiarativa-in-flutter-con-go-router-guida-pratica":21},{"id":4,"title":5,"slug":6,"excerpt":7,"body":8,"cover_image":9,"video_url":10,"status":11,"published_at":12,"meta_title":13,"meta_description":14,"category":15,"author":19},5,"Navigazione dichiarativa in Flutter con go_router: guida pratica","navigazione-dichiarativa-in-flutter-con-go-router-guida-pratica","Scopri come gestire il routing in Flutter in modo moderno e dichiarativo con go_router: rotte annidate, deep linking, redirect e protezione delle pagine autenticate.","## Perché go_router\n\nLa navigazione è uno dei pilastri di ogni applicazione mobile. Per anni gli sviluppatori Flutter hanno usato il `Navigator 1.0` con i suoi metodi imperativi come `Navigator.push` e `Navigator.pop`. Con l'arrivo del `Navigator 2.0` è diventato possibile gestire le rotte in modo dichiarativo, ma la sua API risultava verbosa e complessa.\n\n**go_router**, mantenuto dal team Flutter, nasce proprio per semplificare il `Navigator 2.0` offrendo un'API pulita, supporto nativo al deep linking, ai redirect e alle rotte annidate. È oggi la scelta consigliata ufficialmente per progetti di media e grande dimensione.\n\n## Installazione\n\nAggiungi il pacchetto al tuo `pubspec.yaml`:\n\n```yaml\ndependencies:\n  go_router: ^14.0.0\n```\n\nPoi esegui `flutter pub get`.\n\n## Configurazione di base\n\nDefiniamo un router con due rotte semplici:\n\n```dart\nimport 'package:go_router\u002Fgo_router.dart';\n\nfinal GoRouter router = GoRouter(\n  initialLocation: '\u002F',\n  routes: [\n    GoRoute(\n      path: '\u002F',\n      name: 'home',\n      builder: (context, state) => const HomePage(),\n    ),\n    GoRoute(\n      path: '\u002Fdettaglio',\n      name: 'dettaglio',\n      builder: (context, state) => const DettaglioPage(),\n    ),\n  ],\n);\n```\n\nColleghiamo il router all'applicazione usando `MaterialApp.router`:\n\n```dart\nclass MyApp extends StatelessWidget {\n  const MyApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp.router(\n      title: 'Demo go_router',\n      routerConfig: router,\n    );\n  }\n}\n```\n\n## Navigare tra le pagine\n\nCon go_router puoi spostarti tra le rotte usando il `BuildContext`:\n\n```dart\n\u002F\u002F Sostituisce lo stack corrente\ncontext.go('\u002Fdettaglio');\n\n\u002F\u002F Impila una nuova rotta (push classico)\ncontext.push('\u002Fdettaglio');\n\n\u002F\u002F Navigazione per nome con parametri\ncontext.goNamed('dettaglio');\n```\n\nLa differenza è importante: `go` aggiorna la posizione e ricostruisce lo stack, mentre `push` aggiunge una pagina sopra quella attuale, mantenendo la possibilità di tornare indietro.\n\n## Parametri di percorso e query\n\nUna delle funzionalità più utili è il passaggio di parametri direttamente dall'URL:\n\n```dart\nGoRoute(\n  path: '\u002Fprodotto\u002F:id',\n  builder: (context, state) {\n    final id = state.pathParameters['id']!;\n    final filtro = state.uri.queryParameters['filtro'];\n    return ProdottoPage(id: id, filtro: filtro);\n  },\n),\n```\n\nPer navigare verso questa rotta:\n\n```dart\ncontext.go('\u002Fprodotto\u002F42?filtro=offerte');\n```\n\n## Rotte annidate con ShellRoute\n\nQuando vuoi mantenere un'interfaccia persistente (come una `BottomNavigationBar`) mentre cambi il contenuto interno, `ShellRoute` è la soluzione ideale:\n\n```dart\nShellRoute(\n  builder: (context, state, child) {\n    return ScaffoldConMenu(child: child);\n  },\n  routes: [\n    GoRoute(\n      path: '\u002Ffeed',\n      builder: (context, state) => const FeedPage(),\n    ),\n    GoRoute(\n      path: '\u002Fprofilo',\n      builder: (context, state) => const ProfiloPage(),\n    ),\n  ],\n),\n```\n\nIl widget `child` rappresenta la pagina attiva, mentre lo `ScaffoldConMenu` rimane fisso.\n\n## Redirect e protezione delle rotte\n\nIl parametro `redirect` permette di reindirizzare l'utente in base allo stato dell'applicazione, ad esempio per proteggere le pagine riservate agli utenti autenticati:\n\n```dart\nfinal GoRouter router = GoRouter(\n  initialLocation: '\u002F',\n  redirect: (context, state) {\n    final loggato = AuthService.instance.isLoggedIn;\n    final staAndandoAlLogin = state.matchedLocation == '\u002Flogin';\n\n    if (!loggato && !staAndandoAlLogin) {\n      return '\u002Flogin';\n    }\n    if (loggato && staAndandoAlLogin) {\n      return '\u002F';\n    }\n    return null; \u002F\u002F nessun redirect\n  },\n  routes: [ \u002F* ... *\u002F ],\n);\n```\n\nRestituendo `null` non viene effettuato alcun reindirizzamento; restituendo un percorso, go_router porta l'utente alla nuova destinazione.\n\n## Gestione degli errori\n\nPuoi definire una pagina personalizzata per le rotte non trovate tramite `errorBuilder`:\n\n```dart\nGoRouter(\n  errorBuilder: (context, state) => ErrorPage(error: state.error),\n  routes: [ \u002F* ... *\u002F ],\n);\n```\n\n## Conclusioni\n\ngo_router rende la navigazione in Flutter prevedibile, scalabile e perfettamente integrata con il deep linking del web e del mobile. Grazie a `ShellRoute`, ai redirect e ai parametri tipizzati puoi costruire flussi di navigazione complessi mantenendo il codice leggibile. Se stai avviando un nuovo progetto o pensando di refactorizzare la navigazione esistente, go_router è oggi la scelta più solida e supportata ufficialmente.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Farticles\u002F7dd24a10-9464-4f2a-bd86-87005b661764.jpg",null,"published","2026-06-08T06:00:31+00:00","Navigazione in Flutter con go_router: guida pratica","Guida completa a go_router in Flutter: rotte annidate, deep linking, parametri, redirect e protezione delle pagine autenticate con esempi in Dart.",{"id":16,"name":17,"slug":18},1,"Guide","guide",{"id":16,"name":20},"Flutter Bot",[],1781247856985]