Pantalla de login con BlocListener en Flutter

Construir una pantalla de inicio de sesión en Flutter con BLoC y Firebase te permite escuchar estados de autenticación en tiempo real y reaccionar a cada cambio: carga, éxito o error. Aquí aprenderás a estructurar el archivo login_screen.dart paso a paso, integrando un BlocListener que orqueste la experiencia del usuario.

¿Cómo se estructura el archivo login_screen.dart?

La pantalla parte como un StatelessWidget llamado LoginScreen, ya que el manejo de estado lo delegas al bloc. Dentro del método build retornas un Scaffold con dos piezas claves: el AppBar y el body.

El AppBar lleva un título constante con el texto Iniciar sesión, mientras que el body se construye sobre un BlocListener que escucha cambios del AuthBloc.

¿Por qué usar StatelessWidget si hay estados? Porque el estado vive dentro del bloc, no del widget. La pantalla solo reacciona a lo que el AuthBloc emite, lo que mantiene la UI desacoplada de la lógica.

¿Qué es un BlocListener y cómo se usa en autenticación?

Un BlocListener es un widget que escucha estados emitidos por un bloc sin reconstruir la UI cada vez que cambian. Es ideal para disparar efectos secundarios como diálogos, navegación o mensajes de error.

Para la pantalla de login necesitas dos tipos: AuthBloc como controlador y AuthState como tipo de estado escuchado. Dentro del listener recibes el context y el state, y desde ahí decides qué mostrar según la respuesta.

¿Qué hace el listener en un login? Reacciona a cada estado del bloc: si está cargando muestra un indicador, si autentica navega al dashboard, y si falla despliega un mensaje de error.

¿Cómo manejar los estados de carga, éxito y error?

La lógica del listener cubre tres escenarios que cualquier flujo de autenticación necesita resolver con claridad.

Estado de envío: mostrar progreso al usuario

Cuando el state indica que la petición se está enviando, abres un showDialog con un Center que contiene un CircularProgressIndicator. Esto le comunica al usuario que su solicitud está en proceso y evita que vuelva a presionar el botón.

El builder del diálogo recibe el contexto y devuelve el indicador centrado, manteniendo la pantalla bloqueada mientras Firebase responde.

Estado autenticado: navegar al dashboard

Si la respuesta confirma que el usuario está autenticado, primero cierras el diálogo de carga con Navigator.pop(context) y luego rediriges con Navigator.push hacia la ruta del dashboard.

El orden importa: cerrar el showDialog antes de navegar evita que el indicador quede flotando sobre la nueva pantalla. Más adelante, cuando configures el MainScreen y el route router, esta navegación apuntará directo al home de la aplicación.

Estado de error: mostrar feedback con SnackBar

Cuando el state trae un errorMessage distinto de null, ejecutas dos acciones: cierras el diálogo de carga con Navigator.pop y muestras un SnackBar mediante ScaffoldMessenger.of(context).

Dentro del SnackBar colocas un Text que despliega el mensaje capturado. Así el usuario ve, en una barra inferior breve, exactamente qué salió mal sin perder el contexto de la pantalla.

¿Cómo se conecta el formulario al BlocListener?

Después de definir el listener, agregas un child que contiene el contenido visible. Lo envuelves en un Padding con espaciado uniforme de 16 píxeles en todos los lados para que el formulario respire.

Dentro de ese Padding colocas un widget llamado LoginForm, que construirás como un componente aparte. La pantalla queda así:

• Scaffold con AppBar titulado Iniciar sesión.
• BlocListener<AuthBloc, AuthState> escuchando estados.
• Padding de 16 px envolviendo el contenido.
• LoginForm como widget hijo con los campos de entrada.

Con esta estructura, tu pantalla de login queda constantemente escuchando las funcionalidades del bloc y del repositorio. Los showDialog, la navegación y el SnackBar acompañan cada paso del proceso de autenticación, dándole al usuario retroalimentación inmediata.

¿Ya tienes claro cómo armar el LoginForm con email y contraseña? Cuéntame en los comentarios qué parte del flujo te genera más dudas.