Configuración de rutas en Flutter con GoRouter

La navegación entre pantallas es un aspecto fundamental en el desarrollo de aplicaciones móviles modernas. Con Flutter, podemos implementar sistemas de rutas eficientes que mejoren la experiencia del usuario y faciliten la gestión del estado de la aplicación. En este contenido, exploraremos cómo implementar un sistema de rutas utilizando GoRouter en Flutter, permitiéndonos crear una navegación fluida y gestionar la autenticación de usuarios de manera efectiva.

¿Cómo implementar rutas en Flutter con GoRouter?

Para comenzar a trabajar con rutas en nuestra aplicación Flutter, necesitamos instalar el paquete GoRouter. Este paquete nos proporciona una forma elegante y eficiente de manejar la navegación entre diferentes pantallas.

Para instalar GoRouter, ejecutamos el siguiente comando en la terminal:

flutter pub add go_router

Una vez instalado, podemos importar el paquete en nuestro código:

import 'package:go_router/go_router.dart';

Creación del archivo de rutas

Para mantener nuestro código organizado, es recomendable crear un archivo separado para gestionar todas las rutas de la aplicación. Crearemos un nuevo archivo llamado app_router.dart al mismo nivel que nuestro archivo main.dart:

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

class AppRouter {
  static final router = GoRouter(
    initialLocation: '/login',
    routes: [
      GoRoute(
        path: '/login',
        builder: (context, state) => const LoginScreen(),
      ),
      // Más rutas aquí
    ],
  );
}

En este archivo, definimos una variable estática constante llamada router que es una instancia de GoRouter. Le indicamos que la ruta inicial será /login, lo que significa que nuestra aplicación siempre comenzará en la pantalla de inicio de sesión.

¿Cómo gestionar la autenticación con rutas en Flutter?

Una de las ventajas de usar GoRouter es la facilidad para implementar la verificación de autenticación en nuestras rutas. Podemos crear un sistema que redirija automáticamente a los usuarios no autenticados a la pantalla de inicio de sesión.

Implementación del sistema de autenticación

Para implementar este sistema, modificamos nuestro GoRouter para incluir una verificación de autenticación:

static final router = GoRouter(
  initialLocation: '/login',
  routes: [
    GoRoute(
      path: '/login',
      builder: (context, state) => const LoginScreen(),
    ),
    GoRoute(
      path: '/dashboard',
      builder: (context, state) {
        // Verificar si el usuario está autenticado
        final user = FirebaseAuth.instance.currentUser;
        if (user == null) {
          // Si no está autenticado, redirigir al login
          WidgetsBinding.instance.addPostFrameCallback((_) {
            context.go('/login');
          });
          return const SizedBox();
        }
        
        // Si está autenticado, mostrar el dashboard
        return const DashboardScreen();
      },
    ),
    // Más rutas aquí
  ],
);

En este código, verificamos si hay un usuario autenticado utilizando FirebaseAuth.instance.currentUser. Si no hay ningún usuario (es decir, user == null), redirigimos a la pantalla de inicio de sesión utilizando context.go('/login').

¿Cómo implementar una barra de navegación inferior con GoRouter?

Una característica común en las aplicaciones móviles es tener una barra de navegación inferior (bottom navigation bar) que permite a los usuarios navegar entre las principales secciones de la aplicación.

Creación de la barra de navegación

Para implementar una barra de navegación inferior con GoRouter, podemos utilizar el siguiente enfoque:

return Scaffold(
  body: child,
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: getCurrentIndex(state.uri.toString()),
    onTap: (index) {
      switch (index) {
        case 0:
          context.go('/dashboard');
          break;
        case 1:
          context.go('/spending');
          break;
        case 2:
          context.go('/wallet');
          break;
        case 3:
          context.go('/profile');
          break;
      }
    },
    items: [
      // Definir los items de la barra de navegación
    ],
  ),
);

Para determinar qué pestaña debe estar seleccionada basándonos en la ruta actual, implementamos un método getCurrentIndex:

static int getCurrentIndex(String location) {
  switch (location) {
    case '/login':
      return 0;
    case '/dashboard':
      return 0;
    case '/spending':
      return 1;
    case '/wallet':
      return 2;
    case '/profile':
      return 3;
    default:
      return 0;
  }
}

Definición completa de rutas

Finalmente, definimos todas las rutas de nuestra aplicación:

static final router = GoRouter(
  initialLocation: '/login',
  routes: [
    GoRoute(
      path: '/login',
      builder: (context, state) => const LoginScreen(),
    ),
    GoRoute(
      path: '/dashboard',
      builder: (context, state) => const DashboardScreen(),
    ),
    GoRoute(
      path: '/spending',
      builder: (context, state) => const SpendingScreen(),
    ),
    GoRoute(
      path: '/wallet',
      builder: (context, state) => const WalletScreen(),
    ),
    GoRoute(
      path: '/profile',
      builder: (context, state) => const ProfileScreen(),
    ),
  ],
);

Con esta configuración, nuestra aplicación puede navegar entre diferentes pantallas utilizando context.go('/ruta'), y la barra de navegación inferior se actualizará automáticamente para reflejar la pantalla actual.

La implementación de un sistema de rutas eficiente es crucial para crear aplicaciones Flutter robustas y fáciles de mantener. GoRouter simplifica este proceso, permitiéndonos gestionar la navegación y la autenticación de manera elegante. ¿Has implementado sistemas de rutas en tus aplicaciones Flutter? Comparte tu experiencia en los comentarios.