Routing in Flutter con go_router

go_router è un package per Flutter che ci permette di impostare la navigazione tra le schermate con un meccanismo di routing simile a quanto avviene nel web.

Ha diverse impostazioni avanzate, la possibilità di inviare parametri, usare nested-child, ecc.

In questo articolo vediamo un esempio.

Partiamo dall'installazione:

flutter pub add go_router

Qui sotto un esempio, in cui inviamo un parametro alla seconda schermata:

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

void main() {
  runApp(const MyApp());
}

final GoRouter _router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const ScreenUno();
      },
      routes: <RouteBase>[
        GoRoute(
          path: 'due/:nome',
          builder: (BuildContext context, GoRouterState state) {
            final nome = state.pathParameters['nome']!;
            return ScreenDue(nome: nome);
          },
        ),
      ],
    ),
  ],
);

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Screen Uno')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => context.go('/due/matteo'),
          child: const Text('Vai alla Screen Due'),
        ),
      ),
    );
  }
}

class ScreenDue extends StatelessWidget {
  const ScreenDue({super.key, required this.nome});

  final String nome;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Screen Due, il tuo nome è $nome')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => context.go('/'),
          child: const Text('Torna alla Screen Uno'),
        ),
      ),
    );
  }
}

Enjoy!