Rutas en Flutter con GoRouter y Firebase Auth

Configurar la navegación en una aplicación Flutter con autenticación requiere una estrategia clara para definir rutas, validar sesiones activas y enlazar pantallas con un bottom navigation bar. Aquí aprenderás a implementar GoRouter junto con Firebase Auth para construir un flujo que distinga entre usuarios autenticados y no autenticados, ideal para desarrolladores que trabajan en apps con dashboards y múltiples pantallas.

Cómo instalo GoRouter en un proyecto Flutter

GoRouter es el paquete oficial recomendado por el equipo de Flutter para manejar navegación declarativa. Para sumarlo al proyecto, abre la terminal y ejecuta el comando de instalación [00:14].

bash flutter pub add go_router

Este comando agrega la dependencia al archivo pubspec.yaml y deja lista la librería para importarla. Una vez instalado, podrás usar context.go para moverte entre pantallas y rutas sin escribir lógica de navegación manual.

¿Qué hace context.go en Flutter? Es un método de GoRouter que redirige al usuario a una ruta específica usando el path declarado, sin necesidad de manejar la pila de navegación a mano.

Cómo creo el archivo app_router.dart

La práctica recomendada es separar la lógica de rutas en un archivo dedicado. Crea app_router.dart al mismo nivel que main.dart [00:51] para centralizar la configuración.

Dentro de este archivo defines una clase AppRouter con una variable estática y constante de tipo GoRouter llamada router. Esta variable contendrá:

• La ubicación inicial de la app con initialLocation.
• El listado de rutas disponibles en routes.
• La lógica condicional para validar autenticación.

El initialLocation apunta a /login, garantizando que el inicio de sesión sea siempre la primera pantalla cuando no hay sesión activa [01:32].

Cómo valido la sesión del usuario con Firebase Auth

Antes de mostrar el dashboard, necesitas saber si hay un usuario autenticado. Firebase Auth lo resuelve con una sola línea [03:25]:

dart final user = FirebaseAuth.instance.currentUser;

Si user es null, no hay sesión iniciada y debes redirigir al login. Aquí entra en juego WidgetsBinding.instance.addPostFrameCallback, que asegura que la redirección ocurra después de construir el frame actual, evitando errores de renderizado [04:04].

dart if (user == null) { WidgetsBinding.instance.addPostFrameCallback((_) { context.go('/login'); }); }

Cuando sí hay usuario autenticado, retornas un Scaffold que recibe un child (la pantalla actual) y un bottomNavigationBar para movernos entre dashboard, spending, wallet y profile [04:53].

¿Para qué sirve addPostFrameCallback? Ejecuta una función justo después de que Flutter termine de construir el widget actual, lo que permite navegar sin interrumpir el ciclo de renderizado.

Cómo configuro el bottom navigation bar con switch

El BottomNavigationBar necesita dos piezas: un currentIndex que indique la pantalla activa y un onTap que reaccione al cambio. La función onTap recibe un index y usa un switch para redirigir [05:43].

• case 0: redirige a /dashboard.
• case 1: redirige a /spending.
• case 2: redirige a /wallet.
• case 3: redirige a /profile.

El currentIndex se obtiene de manera automatizada con un método estático llamado getCurrentIndex, que recibe el path actual como String y devuelve el índice correspondiente [07:30]. Para alimentar este método usas state.uri.toString(), que GoRouter expone para saber en qué ruta te encuentras.

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

Cómo declaro las rutas hijas en GoRouter

Dentro del builder del dashboard agregas una propiedad routes con un listado de GoRoute, donde cada ruta tiene su path y su builder que retorna la pantalla correspondiente [09:18].

dart routes: [ 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()), ]

Es clave que los paths coincidan exactamente con los del switch del bottom navigation. Un error de tipeo aquí rompe la navegación silenciosamente.

¿Qué diferencia hay entre initialLocation y path en GoRouter? initialLocation define dónde arranca la app al abrirla, mientras que path identifica cada ruta dentro del árbol de navegación.

Qué lograste con esta configuración

Con este AppRouter montado, tu app ya distingue entre usuarios autenticados y anónimos, redirige automáticamente al login cuando no hay sesión, y permite moverte entre cuatro pantallas con un tab bar sincronizado al path activo. Como reto, crea la pantalla de analíticas, personalízala y agrégala como un nuevo tab dentro del navbar.

¿Cómo resolviste tú la validación de sesión en Flutter? Comparte tu enfoque en los comentarios.