Navigazione tra schermate in Flutter con go_router

Per prima cosa aggiungiamo il pacchetto go_router al nostro progetto. Apri il file pubspec.yaml e inserisci la dipendenza nella sezione dependencies.

In alternativa puoi eseguire il comando da terminale:

flutter pub add go_router

Dopo l'aggiunta esegui flutter pub get per scaricare il pacchetto.

dependencies:
  flutter:
    sdk: flutter
  go_router: ^14.0.0

Creiamo due semplici schermate che useremo per la navigazione: una HomeScreen e una DetailsScreen. La schermata dei dettagli accetterà un parametro id che mostreremo a video.

Queste sono normali StatelessWidget di Flutter.

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => context.go('/details/42'),
          child: const Text('Vai ai dettagli'),
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  final String id;
  const DetailsScreen({super.key, required this.id});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dettagli')),
      body: Center(child: Text('Elemento con id: $id')),
    );
  }
}

Definiamo ora la configurazione delle rotte. Creiamo un'istanza di GoRouter con la lista delle GoRoute.

Nota l'uso di :id nel path: è un parametro dinamico che recuperiamo tramite state.pathParameters.

final GoRouter router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomeScreen(),
    ),
    GoRoute(
      path: '/details/:id',
      builder: (context, state) {
        final id = state.pathParameters['id']!;
        return DetailsScreen(id: id);
      },
    ),
  ],
);

Per attivare go_router dobbiamo usare il costruttore MaterialApp.router al posto del classico MaterialApp, passando la configurazione tramite routerConfig.

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Demo go_router',
      routerConfig: router,
    );
  }
}

Usare i path completi nel codice è poco manutenibile. go_router permette di assegnare un nome alle rotte e navigare con goNamed. Possiamo anche passare parametri query.

Aggiorniamo la rotta dei dettagli con un nome e leggiamo un eventuale parametro query from.

GoRoute(
  path: '/details/:id',
  name: 'details',
  builder: (context, state) {
    final id = state.pathParameters['id']!;
    final from = state.uri.queryParameters['from'] ?? 'sconosciuto';
    return DetailsScreen(id: id, from: from);
  },
),

// Navigazione con nome e parametri:
context.goNamed(
  'details',
  pathParameters: {'id': '42'},
  queryParameters: {'from': 'home'},
);

Una funzionalità potente di go_router è il redirect, eseguito prima di mostrare una rotta. È perfetto per proteggere pagine riservate agli utenti autenticati.

Se l'utente non è loggato e tenta di accedere a una rotta protetta, lo reindirizziamo alla pagina di login.

bool isLoggedIn = false;

final router = GoRouter(
  initialLocation: '/',
  redirect: (context, state) {
    final goingToProfile = state.matchedLocation == '/profile';
    if (goingToProfile && !isLoggedIn) {
      return '/login';
    }
    return null; // nessun redirect
  },
  routes: [
    GoRoute(path: '/', builder: (c, s) => const HomeScreen()),
    GoRoute(path: '/login', builder: (c, s) => const LoginScreen()),
    GoRoute(path: '/profile', builder: (c, s) => const ProfileScreen()),
  ],
);

Infine, gestiamo le rotte non valide con errorBuilder. Quando l'utente naviga verso un URL inesistente, mostriamo una schermata di errore amichevole con un pulsante per tornare alla home.

final router = GoRouter(
  initialLocation: '/',
  errorBuilder: (context, state) => Scaffold(
    appBar: AppBar(title: const Text('Errore')),
    body: Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('Pagina non trovata: ${state.uri}'),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: () => context.go('/'),
            child: const Text('Torna alla Home'),
          ),
        ],
      ),
    ),
  ),
  routes: [
    GoRoute(path: '/', builder: (c, s) => const HomeScreen()),
  ],
);