Herramienta de grabación de sesión para Flutter: UXCam

Resumen rápido

Si estás leyendo esto, probablemente quieres entender qué hacen realmente los usuarios dentro de tu app Flutter: dónde dudan, qué toques no se registran y por qué abandonan un flujo a mitad de camino. Y es aún más probable que estés buscando una herramienta de grabación de sesión que funcione de verdad con Flutter, que dibuja cada widget con su propio motor de renderizado en lugar de usar vistas nativas.

La buena noticia: esta guía explica qué es la grabación de sesión, cómo funciona en Flutter y cómo configurarla con UXCam. Un único SDK de Flutter graba sesiones en tus apps de iOS y Android y también en Flutter Web, así que una sola integración cubre móvil y web. También verás cómo nombrar pantallas, enmascarar widgets sensibles y conectar las grabaciones con eventos y crashes, para que cada sesión responda a una pregunta real.

¿Qué es una grabación de sesión?

Una grabación de sesión es una reconstrucción visual, paso a paso, de cómo los usuarios navegan por tu aplicación. Captura cada toque, deslizamiento, desplazamiento y transición de pantalla para que los equipos puedan ver la ruta del usuario real, no solo métricas.

En lugar de adivinar dónde ocurre la fricción, la grabación de sesión te permite observar la experiencia real: dudas antes de tocar un botón, flujos rotos, elementos de la interfaz de usuario confusos o momentos de frustración. Para las aplicaciones Flutter, esto es especialmente importante porque los widgets pueden comportarse de manera diferente según el dispositivo.

UXCam convierte estas interacciones en grabaciones seguras y privadas que ayudan a los equipos a depurar problemas, mejorar los flujos y crear mejores funciones con confianza.

Cómo funciona la grabación de sesión en Flutter

Flutter no construye su interfaz con vistas nativas de iOS o Android. Dibuja cada widget por su cuenta, y por eso las herramientas de analítica que leen jerarquías de vistas nativas a menudo no ven lo que realmente ven los usuarios de Flutter. El SDK de Flutter de UXCam, el paquete flutter_uxcam en pub.dev, graba lo que aparece en pantalla junto con los datos de interacción que lo explican.

En iOS y Android, el plugin se apoya en los SDK nativos de UXCam. Cada sesión grabada incluye:

• Video de la pantalla: una grabación visual de lo que vio el usuario, incluidas las reconstrucciones de widgets, las transiciones y los diálogos.

• Gestos: toques, pulsaciones largas, deslizamientos, desplazamientos y navegación hacia atrás, visibles en la grabación y en la línea de tiempo de la sesión.

• Nombres de pantalla: los nombres de ruta del Navigator de Flutter, o los nombres que tú definas, que dividen cada grabación en pantallas con el tiempo dedicado a cada una.

• Eventos y propiedades de usuario: los eventos personalizados que registras y los atributos que asocias a los usuarios, marcados en el momento exacto en que ocurrieron.

• Problemas: crashes, congelamientos de la interfaz y rage taps, señalados automáticamente para que vayas directo a ellos.

Las sesiones se suben cuando la app pasa a segundo plano y aparecen en el dashboard de UXCam poco después. Las versiones recientes del SDK también pausan la captura de fotogramas mientras se desplaza una lista, lo que mantiene las grabaciones fiables en pantallas largas y rápidas. En Flutter Web, el mismo plugin graba el canvas en el que Flutter dibuja tu app, así que las sesiones web también se basan en video (más detalles abajo).

Algo que conviene planificar desde el principio: Flutter no oculta nada de las grabaciones por defecto. Los widgets sensibles, como campos de contraseña o números de tarjeta, deben envolverse con el OccludeWrapper de UXCam, que los oculta en el propio dispositivo antes de subir nada. La sección de privacidad más abajo repasa las opciones.

Cómo configurar la grabación de sesión en Flutter con UXCam

Antes de empezar, necesitas una cuenta de UXCam, un proyecto Flutter y una clave de app de tu dashboard. Las builds móviles requieren iOS 12.0 o superior y Android minSdkVersion 21 o superior. Flutter Web usa su propia clave de app web, y no hace falta añadir el SDK web independiente de UXCam, porque el plugin de Flutter se encarga de ambas plataformas.

1. Añade el paquete: ejecuta flutter pub add flutter_uxcam en tu proyecto. Esto añade flutter_uxcam a tu pubspec.yaml, y el mismo paquete sirve para iOS, Android y Flutter Web.

2. Inicializa UXCam una sola vez: importa package:flutter_uxcam/flutter_uxcam.dart y llama a FlutterUxcam.startWithConfiguration() con un FlutterUxConfig en el initState de tu StatefulWidget raíz, para que la grabación empiece junto con la app. En móvil, llama antes a FlutterUxcam.optIntoVideoRecording() y pasa tu clave de app móvil. En la web, pasa tu clave de app web. Una comprobación con kIsWeb permite que un único código elija la clave correcta.

3. Decide cómo se nombran las pantallas: para la mayoría de las apps Flutter, UXCam recomienda poner enableAutomaticScreenNameTagging en false y añadir FlutterUxcamNavigatorObserver a tu navigator. La siguiente sección explica por qué.

4. Ejecuta la app y revisa tu primera sesión: en un dispositivo o emulador, recorre algunas pantallas y envía la app a segundo plano. La sesión aparece en tu dashboard en pocos minutos. En la web, busca el mensaje “[UXCam] connected successfully” en la consola del navegador y luego cierra la pestaña; las sesiones web suelen aparecer en 5 a 10 minutos.

5. Personaliza desde el dashboard: renombra pantallas, configura reglas de oclusión, define los eventos que importan y guarda los filtros que tu equipo usará más.

Para ejemplos de código y todas las opciones de configuración, consulta la guía de inicio rápido de UXCam para Flutter y la guía completa de integración con Flutter.

Cómo nombrar pantallas de Flutter para grabaciones más claras

Una grabación solo es tan útil como los nombres de pantalla que la rodean. Los nombres de pantalla dividen cada sesión en bloques en la línea de tiempo, alimentan los filtros por pantalla y sostienen los mapas de calor, los embudos y el análisis de rutas. Como Flutter gestiona la navegación dentro del árbol de widgets, conviene decidir cómo se nombran las pantallas antes de publicar.

La guía de etiquetado de pantallas de UXCam recomienda FlutterUxcamNavigatorObserver para la mayoría de las apps, con el etiquetado automático de pantallas desactivado. El etiquetado automático se diseñó para jerarquías nativas de UIKit y Activities de Android, así que puede interpretar mal los cambios de ruta de Flutter, mientras que el observer escucha directamente al Navigator. Añádelo a navigatorObservers en tu MaterialApp si usas Navigator 1.0, o a los observers de tu router si usas Navigator 2.0 con un paquete como go_router. Pon nombre a tus rutas también, ya que las rutas sin nombre suelen aparecer como una simple barra.

Las barras de navegación inferior y las pestañas necesitan un paso más. El observer no detecta los cambios de pestaña, así que todas se grabarían con el nombre de la pantalla padre, y tu línea de tiempo, tus mapas de calor y tus embudos las mezclarían. Llama a FlutterUxcam.tagScreenName() con un nombre como Home Tab en el callback onTap de tu BottomNavigationBar o en un listener del TabController, y la grabación mostrará en qué pestaña estaba realmente el usuario. El etiquetado manual con tagScreenName() también sirve para sistemas de rutas personalizados en los que ningún observer encaja.

Flutter Web sigue las reglas del navegador, así que las páginas se identifican por su URL y no por el nombre de la ruta. Llama a usePathUrlStrategy() antes de iniciar UXCam para que tus URLs sean rutas limpias en lugar de fragmentos con almohadilla y, después, usa las reglas de definición de páginas del dashboard para renombrar páginas y agrupar rutas dinámicas, como /products/123, bajo un solo nombre.

Sea cual sea el enfoque, comprueba que cada pantalla aparezca en el dashboard con una duración superior a cero segundos. Una pantalla de 0 s suele indicar que dos etiquetas se dispararon en el mismo fotograma, a menudo porque el etiquetado automático y el manual están activos a la vez.

Grabación de sesión para Flutter Web

El soporte de UXCam para Flutter no se limita a los móviles. El plugin flutter_uxcam también graba apps de Flutter Web, así que los equipos que publican un único código Flutter en móvil y en el navegador pueden revisar ambos tipos de sesión en el mismo dashboard de UXCam. Lo inicializas con una clave de app web, y tus llamadas a UXCam para nombrar pantallas, registrar eventos y definir propiedades de usuario siguen funcionando sin cambios.

Las grabaciones de Flutter Web se basan en video y no en el DOM, porque UXCam captura el canvas en el que Flutter dibuja tu app. Eso tiene algunos efectos prácticos. Verás indicadores de toque en lugar del movimiento del ratón, igual que los gestos aparecen en las grabaciones móviles. Una grabación puede empezar con una breve pantalla en blanco antes del primer fotograma de tu app, mientras los gestos, las pantallas y los eventos siguen alineados con el video desde el inicio. Y los iframes incrustados mediante HtmlElementView aparecen en blanco, porque el navegador los renderiza fuera del canvas de Flutter.

La experiencia principal es la misma en ambas plataformas: la grabación de sesión, los nombres de pantalla, los eventos y las propiedades de usuario funcionan en Flutter Web, y el enmascaramiento estándar con OccludeWrapper también está soportado. Algunas API son exclusivas de móvil, como los controles de grabación (pausar y reanudar), la gestión de crashes y ANR, los métodos de consentimiento opt-in y opt-out y los registros de depuración. Llamarlas en la web es seguro, porque allí no hacen nada, pero envolverlas en una comprobación con kIsWeb deja clara la intención. Los mapas de calor y Tara, la analista de IA de UXCam, todavía no están disponibles para sesiones de Flutter Web, y la página de soporte de la plataforma Flutter Web mantiene la matriz de funciones actualizada.

Beneficios de Session Recording en Flutter

Para las aplicaciones creadas con Flutter, la grabación de sesión de UXCam ofrece una forma poderosa de comprender el comportamiento del usuario y optimizar el rendimiento. Esto es lo que obtienes:

• Integración sin esfuerzo: el SDK de Flutter de UXCam es un único paquete ligero para iOS, Android y Flutter Web. La configuración lleva pocas líneas de código, y la grabación empieza sin etiquetar cada widget.

• Seguimiento de pantallas que sigue la navegación de Flutter: FlutterUxcamNavigatorObserver capta los cambios de ruta de Navigator 1.0 y 2.0, así que las grabaciones se dividen en pantallas con nombre sin instrumentación adicional.

• Diseño centrado en la privacidad: OccludeWrapper y las reglas de oclusión del dashboard ocultan los widgets sensibles en el propio dispositivo, y esos datos nunca llegan a los servidores de UXCam. Obtienes los insights que necesitas sin comprometer la privacidad de los usuarios ni la seguridad de la app.

• Problemas vinculados a sesiones reales: los crashes, los congelamientos de la interfaz y los rage taps se señalan dentro de la grabación, para que veas exactamente qué llevó a cada uno.

Visión General de Session Recording en Flutter

UXCam proporciona grabaciones de sesión de alta calidad respaldadas por potentes filtros, etiquetas, notas y analítica de eventos. Los equipos pueden encontrar rápidamente las sesiones que importan, ver solo los momentos relevantes y colaborar en los problemas directamente dentro del dashboard.

Cada sesión incluye detalles esenciales del usuario, como ubicación, dispositivo, crashes, congelamientos de la interfaz de usuario y atributos personalizados, lo que brinda a los equipos un contexto completo antes de revisar la grabación.

Componentes clave de una sesión de UXCam

Estos son los detalles que encontrarás en una grabación de sesión de UXCam:

Barra de información de la sesión

El panel superior de la grabación muestra la identificación del usuario (Alias o ID de usuario), la ubicación, el dispositivo, el tiempo de la sesión y las etiquetas. Si ocurre un crash o un congelamiento de la interfaz de usuario, UXCam lo marca automáticamente. Al hacer clic en el indicador, se revelan los registros técnicos para que los desarrolladores puedan diagnosticar el problema rápidamente.

Línea de tiempo detallada (Pestaña de actividad)

La línea de tiempo de UXCam visualiza la ruta completa a través de pantallas y acciones. Los bloques representan pantallas y cada bloque muestra cuánto tiempo permaneció un usuario. Al hacer clic en cualquier interacción, se salta directamente a ese punto en la grabación, lo que facilita la investigación de la fricción. Los iconos de eventos inteligentes resaltan toques, gestos, rage taps o eventos personalizados, lo que te permite navegar por las sesiones sin ver la grabación completa.

Filtros avanzados para encontrar sesiones clave

Los filtros de UXCam te ayudan a encontrar las sesiones adecuadas al instante. Puedes restringir los resultados por:

• Acciones del usuario (toques, deslizamientos, desplazamientos)

• Problemas técnicos (crashes, congelamientos)

• Atributos del usuario (dispositivo, ubicación, sistema operativo)

• Características de la sesión (duración, nivel de engagement)

También puedes excluir a los evaluadores internos y filtrar por señales de frustración como rage taps o toques muertos. Esto ayuda a los equipos de Flutter a comprender exactamente dónde ocurren los problemas de usabilidad.

Etiquetar sesiones

UXCam te permite identificar e investigar fácilmente los problemas de los usuarios con su función de etiquetado. Al agregar etiquetas personalizadas, como "crash" o un mensaje de error específico, es más fácil filtrar grandes volúmenes de sesiones para encontrar las que contienen información relevante sobre los problemas potenciales que experimentan tus usuarios. Además, mejora la colaboración multifuncional entre los equipos de producto, diseño, QA e ingeniería.

Dejar notas para alinear a tu equipo

Con las notas, puedes resaltar los problemas que un usuario puede haber experimentado o proporcionar sugerencias de mejora directamente en partes específicas de las sesiones de grabación. Además, la colaboración en equipo se simplifica; comparte tus notas con otros miembros y dales un contexto significativo sobre los comportamientos observados.

Analizar eventos

El análisis de eventos te permite saltar de un evento personalizado directamente al momento en que ocurrió en la grabación. Esto te brinda un insight más rápido sobre el comportamiento del usuario en torno a acciones clave, compras, toques, pasos de onboarding, intentos fallidos, etc. Puedes ver las sesiones vinculadas a ese evento o pasar a los informes para analizar tendencias.

Privacidad y seguridad en la grabación de sesión con Flutter

UXCam mantiene el más alto estándar de privacidad y seguridad de los datos de los usuarios. Con el Cost of a Data Breach Report 2026 de IBM situando el costo promedio global de una filtración de datos en un récord de 4,99 millones de dólares, las protecciones de privacidad integradas son una salvaguarda esencial, no un extra opcional.

Flutter no oculta nada por defecto, así que el enmascaramiento es algo que configuras a propósito. La herramienta más sencilla es OccludeWrapper: pasa cualquier widget como hijo, desde un único widget Text hasta una Column completa, y UXCam lo oculta en la grabación. La oclusión ocurre en el dispositivo antes de subir la sesión, lo que significa que el contenido enmascarado nunca llega a los servidores de UXCam.

Para pantallas completas, como el inicio de sesión o el pago, puedes aplicar un desenfoque o una superposición sólida con FlutterUXBlur o FlutterUXOverlay, en tiempo de ejecución o en la configuración con una lista de nombres de pantalla. Ambos ocultan los gestos en esas pantallas por defecto, que es justo lo que quieres cerca de los campos de contraseña. Si prefieres no publicar código para esto, los ajustes de privacidad de grabación de video del dashboard de UXCam te permiten grabar, ocultar o desenfocar todas las pantallas, o crear reglas para pantallas específicas. Estas opciones por pantalla se aplican a iOS y Android; en Flutter Web, OccludeWrapper es el enfoque soportado.

El consentimiento y la identidad también importan. Si tu app pide permiso antes de grabar, llama a FlutterUxcam.optIntoVideoRecording() u optOutOfVideoRecording() para respetar la decisión de cada usuario. Identifica a los usuarios con un ID interno en lugar de un correo o un teléfono, y deja los datos personales fuera de las propiedades de eventos y de usuario. UXCam cumple con el GDPR y la CCPA, y la guía de oclusión detalla cada opción.

Añade eventos, identidad de usuario y contexto de crashes

Las pantallas te dicen adónde van los usuarios; los eventos muestran qué hacen. La guía de eventos de UXCam sugiere un conjunto acotado de 5 a 15 eventos en hitos del flujo, uso de funciones clave, errores y cancelaciones. Regístralos con FlutterUxcam.logEvent(), o usa logEventWithProperties() para adjuntar hasta 20 propiedades, como el plan o el precio. Cada evento aparece como un marcador en la línea de tiempo de la grabación, así que filtrar por algo como Payment_Failed te lleva directo al momento en que ocurrió.

Dos señales llegan sin escribir código. Un rage tap se registra cuando un usuario toca tres o más veces en 300 milisegundos en el mismo punto, y un congelamiento de la interfaz se registra cuando el hilo principal queda bloqueado dos segundos o más. Filtrar por cualquiera de los dos es una de las formas más rápidas de encontrar usuarios frustrados en una app Flutter grande.

Cuando un ticket de soporte menciona a un usuario concreto, quieres sus sesiones y no un alias aleatorio. FlutterUxcam.setUserIdentity() reemplaza el alias predeterminado de UXCam por tu propio ID de usuario, y setUserProperty() te permite añadir hasta 100 atributos, como el tipo de suscripción o el rol, que se convierten en filtros y segmentos para tus grabaciones. La guía de propiedades de usuario tiene los detalles.

En iOS y Android, pon enableCrashHandling en true en tu FlutterUxConfig para capturar crashes y ANR junto con la sesión, y reenvía los errores de FlutterError.onError a UXCam para que las excepciones gestionadas también aparezcan con contexto. La guía de gestión de crashes muestra la configuración completa. La captura de crashes forma parte del SDK móvil, así que no aplica a Flutter Web.

Impacto en el rendimiento y control de la grabación

Muchos desarrolladores se hacen la misma pregunta antes de añadir cualquier SDK: “¿La grabación de sesión ralentizará mi app Flutter?”

UXCam está diseñado para no interferir con el pipeline de renderizado de Flutter. Captura fotogramas y datos de gestos sin bloquear el hilo de la interfaz ni ralentizar las animaciones, y las versiones recientes pausan la captura durante los desplazamientos activos para mantener las grabaciones fluidas y fiables. Puedes leer más sobre cómo está construido el SDK en por qué UXCam tiene uno de los SDK con mejor rendimiento.

Controla qué se graba

Las API de control de grabación te dan un control detallado en móvil. FlutterUxcam.pauseScreenRecording() y resumeScreenRecording() detienen la captura de video en una pantalla sensible mientras la sesión continúa, stopSessionAndUploadData() termina una sesión cuando lo necesites e isRecording() indica el estado actual. También puedes iniciar UXCam de forma condicional, por ejemplo, solo después de que el usuario haya dado su consentimiento.

Mantén las sesiones de prueba fuera de los datos de producción

Para que las sesiones de desarrollo y QA no se mezclen con tus datos de producción, inicia UXCam solo en builds de release o cuando tu variable de entorno indique producción. Junto con los filtros del dashboard que excluyen a los evaluadores internos, esto mantiene tus grabaciones centradas en usuarios reales y tu analítica libre del ruido de las pruebas.

Problemas de Flutter que Resuelve Session Recording

La grabación de sesión ayuda a los equipos a diagnosticar problemas específicos de Flutter que son difíciles de detectar con registros o analítica. Estos incluyen:

• Fallas en los gestos: A veces los toques no se registran debido a conflictos en el detector de gestos o capas invisibles.

• Problemas de desbordamiento de diseño: En ciertos tamaños de dispositivos, los widgets de Flutter se desbordan o se desalinean. La grabación de sesión revela exactamente dónde.

• Problemas de la interfaz de usuario del teclado: El teclado a menudo cubre los campos de entrada en las aplicaciones Flutter. Las grabaciones muestran cómo los usuarios luchan con los formularios.

• Problemas de desplazamiento y listas: El desplazamiento infinito, los encabezados fijos y las vistas de lista personalizadas a veces se comportan incorrectamente.

• Congelamientos silenciosos de la interfaz de usuario: Flutter puede congelarse debido a operaciones asíncronas que bloquean el hilo de la interfaz de usuario; las grabaciones muestran el momento en que sucede.

• Abandonos en el onboarding: La grabación de sesión descubre por qué los usuarios abandonan durante los flujos de varios pasos.

• Problemas de diseño propios del navegador: si publicas en Flutter Web, las grabaciones muestran dónde se rompe el diseño con ciertos tamaños de ventana o dónde la entrada de datos se comporta distinto en el navegador.

Mejores Prácticas de Session Recording en Flutter

Para obtener el máximo valor de la grabación de sesión, sigue estas prácticas recomendadas para la configuración, el análisis y la colaboración entre equipos.

1. Enmascarar widgets sensibles temprano La privacidad debe configurarse desde el principio. Envuelve con OccludeWrapper los widgets sensibles, como entradas de contraseña, detalles de pago o formularios de información personal, y añade reglas de desenfoque o superposición para pantallas completas como el checkout. El enmascaramiento garantiza que los datos protegidos nunca aparezcan en las grabaciones de sesión.

2. Rastrear eventos clave para el contexto La grabación de sesión se vuelve mucho más significativa cuando se combina con datos de eventos. Al rastrear interacciones como toques de botones, envíos de formularios, uso de funciones y estados de error, le das a tu equipo el contexto necesario para comprender por qué los usuarios se comportan como lo hacen.

3. Usar embudos para diagnosticar abandonos Los embudos revelan dónde los usuarios abandonan flujos de trabajo importantes como el onboarding, el pago o los registros. Cuando conectas estos embudos a las grabaciones de sesión, puedes saltar directamente a las sesiones reales donde ocurren los abandonos.

4. Revisar sesiones de diferentes dispositivos y plataformas Las aplicaciones Flutter a menudo se comportan de manera diferente en dispositivos con distintos tamaños de pantalla, potencia de procesamiento y frecuencias de actualización, y Flutter Web añade navegadores y tamaños de ventana a la lista. Ver grabaciones de pantallas pequeñas, tablets, dispositivos de gama baja y navegadores de escritorio te ayuda a identificar problemas de diseño que no verás en entornos de prueba internos controlados.

5. Involucrar a los equipos de producto, diseño y QA La grabación de sesión es más efectiva cuando se usa en todos los equipos. Los gerentes de producto pueden validar si las nuevas funciones funcionan según lo previsto. Los diseñadores pueden observar la usabilidad en el mundo real. El equipo de QA puede identificar errores más rápido al ver grabaciones en lugar de reproducir pasos complejos.

Crea una mejor experiencia de usuario con UXCam

UXCam ofrece a los equipos de Flutter una visión clara de cómo los usuarios interactúan con sus aplicaciones en iOS, Android y la web, desde grabaciones de sesión y etiquetado de eventos hasta analítica que prioriza la privacidad. Su integración perfecta con Flutter, sus filtros intuitivos y su rápida configuración la convierten en una herramienta poderosa para descubrir la fricción y mejorar la usabilidad.

En lugar de adivinar qué experimentan los usuarios, puedes ver las sesiones, realizar un seguimiento de gestos detallados y ver cómo las personas reales navegan por tu aplicación. Combinado con mapas de calor, análisis de embudos y insights potenciados por IA, UXCam convierte los datos de comportamiento complejos en insights claros y accionables.

¿Listo para mejorar la experiencia de tu producto? Prueba UXCam gratis hoy mismo.

También podría interesarte:

Mapas de calor de apps móviles: La guía definitiva 2026

Cómo los equipos usan a Tara como su analista de producto con IA

UXCam vs Amplitude: Una comparativa real para la analítica de productos móviles

Las 19 mejores herramientas de análisis de apps móviles 2026