Replay e Gravação de Sessões no Flutter para Aplicativos: UXCam

Resumo rápido

Se você está lendo isso, provavelmente quer entender o que os usuários realmente fazem no seu app Flutter: onde hesitam, quais toques não são registrados e por que abandonam um fluxo pela metade. E há uma chance ainda maior de que você esteja procurando uma ferramenta de gravação de sessão que funcione de verdade com o Flutter, que desenha cada widget com o próprio motor de renderização em vez de usar views nativas.

A boa notícia: este guia explica o que é gravação de sessão, como ela funciona no Flutter e como configurá-la com a UXCam. Um único SDK Flutter grava sessões nos seus apps iOS e Android e também no Flutter Web, então uma só integração cobre mobile e web. Você também vai ver como nomear telas, mascarar widgets sensíveis e conectar os replays a eventos e falhas, para que cada gravação responda a uma pergunta real.

O que é uma Gravação de sessão?

Uma Gravação de sessão é uma reconstrução visual, passo a passo, de como os usuários navegam em seu aplicativo. Ela captura cada toque, deslize, rolagem e transição de tela para que as equipes possam ver a Jornada do usuário real, não apenas métricas.

Em vez de adivinhar onde ocorre a fricção, a Gravação de sessão permite que você assista à experiência real: hesitação antes de tocar em um botão, fluxos interrompidos, elementos de UI confusos ou momentos de frustração. Para aplicativos Flutter, isso é especialmente importante porque os widgets podem se comportar de maneira diferente em cada dispositivo.

A UXCam transforma essas interações em gravações seguras e privadas que ajudam as equipes a depurar problemas, melhorar fluxos e criar recursos melhores com confiança.

Como a gravação de sessão funciona no Flutter

O Flutter não monta a interface com views nativas de iOS ou Android. Ele desenha cada widget por conta própria, e é por isso que ferramentas de analytics que leem hierarquias de views nativas muitas vezes não enxergam o que os usuários de Flutter realmente veem. O SDK Flutter da UXCam, o pacote flutter_uxcam no pub.dev, grava o que aparece na tela, junto com os dados de interação que explicam cada momento.

No iOS e no Android, o plugin usa os SDKs nativos da UXCam. Cada sessão gravada inclui:

• Vídeo da tela: uma gravação visual do que o usuário viu, incluindo reconstruções de widgets, transições e diálogos.

• Gestos: toques, toques longos, deslizes, rolagens e navegação de volta, exibidos no replay e na linha do tempo da sessão.

• Nomes de tela: nomes de rotas do Navigator do Flutter, ou nomes que você mesmo define, que dividem cada replay em telas com o tempo gasto em cada uma.

• Eventos e propriedades de usuário: os eventos personalizados que você registra e os atributos que você associa aos usuários, marcados no momento exato em que aconteceram.

• Problemas: falhas, congelamentos de UI e rage taps, sinalizados automaticamente para que você vá direto até eles.

As sessões são enviadas quando o app vai para segundo plano e aparecem no Dashboard da UXCam pouco depois. As versões mais recentes do SDK também pausam a captura de quadros enquanto uma lista está sendo rolada, o que mantém as gravações confiáveis em telas longas e rápidas. No Flutter Web, o mesmo plugin grava o canvas em que o Flutter desenha o seu app, então as sessões web também são baseadas em vídeo (mais sobre isso abaixo).

Um ponto para planejar desde o início: o Flutter não oculta nada das gravações por padrão. Widgets sensíveis, como campos de senha ou números de cartão, precisam ser envolvidos pelo OccludeWrapper da UXCam, que os oculta no próprio dispositivo antes de qualquer envio. A seção de privacidade abaixo mostra as opções.

Como configurar a gravação de sessão no Flutter com a UXCam

Antes de começar, você vai precisar de uma conta na UXCam, de um projeto Flutter e de uma chave de app do seu Dashboard. Builds mobile exigem iOS 12.0 ou superior e Android minSdkVersion 21 ou superior. O Flutter Web usa uma chave de app web própria, e você não precisa adicionar o SDK web separado da UXCam, porque o plugin Flutter cuida das duas plataformas.

1. Adicione o pacote: execute flutter pub add flutter_uxcam no seu projeto. Isso adiciona o flutter_uxcam ao seu pubspec.yaml, e o mesmo pacote atende iOS, Android e Flutter Web.

2. Inicialize a UXCam uma única vez: importe package:flutter_uxcam/flutter_uxcam.dart e chame FlutterUxcam.startWithConfiguration() com um FlutterUxConfig no initState do seu StatefulWidget raiz, para que a gravação comece junto com o app. No mobile, chame FlutterUxcam.optIntoVideoRecording() antes e passe a sua chave de app mobile. Na web, passe a sua chave de app web. Uma verificação com kIsWeb permite que um único código escolha a chave certa.

3. Defina como as telas serão nomeadas: para a maioria dos apps Flutter, a UXCam recomenda definir enableAutomaticScreenNameTagging como false e adicionar o FlutterUxcamNavigatorObserver ao seu navigator. A próxima seção explica por quê.

4. Execute o app e confira a primeira sessão: em um dispositivo ou emulador, navegue por algumas telas e envie o app para segundo plano. A sessão aparece no seu Dashboard em poucos minutos. Na web, procure a mensagem “[UXCam] connected successfully” no console do navegador e depois feche a aba; as sessões web costumam aparecer em 5 a 10 minutos.

5. Personalize no Dashboard: renomeie telas, configure regras de oclusão, defina os eventos que importam e salve os filtros que sua equipe mais vai usar.

Para exemplos de código e todas as opções de configuração, consulte o guia rápido da UXCam para Flutter e o guia completo de integração com Flutter.

Como nomear telas do Flutter para replays mais claros

Um replay só é tão útil quanto os nomes de tela ao redor dele. Os nomes de tela dividem cada sessão em blocos na linha do tempo, alimentam filtros por tela e sustentam heatmaps, funis e análise de jornada. Como o Flutter cuida da navegação dentro da árvore de widgets, vale decidir como as telas serão nomeadas antes de publicar o app.

O guia de screen tagging da UXCam recomenda o FlutterUxcamNavigatorObserver para a maioria dos apps, com a marcação automática de telas desativada. A marcação automática foi pensada para hierarquias nativas de UIKit e Activities do Android, então pode interpretar mal as mudanças de rota do Flutter, enquanto o observer escuta o Navigator diretamente. Adicione-o em navigatorObservers no seu MaterialApp se você usa o Navigator 1.0, ou nos observers do seu router se usa o Navigator 2.0 com um pacote como o go_router. Dê nomes às suas rotas também, já que rotas sem nome costumam aparecer apenas como uma barra.

Barras de navegação inferior e abas exigem um passo a mais. O observer não percebe a troca de abas, então todas elas seriam gravadas com o nome da tela pai, e sua linha do tempo, seus heatmaps e seus funis misturariam tudo. Chame FlutterUxcam.tagScreenName() com um nome como Home Tab no callback onTap do BottomNavigationBar ou em um listener do TabController, e o replay mostra em qual aba o usuário realmente estava. A marcação manual com tagScreenName() também resolve configurações de rotas personalizadas em que nenhum observer se encaixa.

O Flutter Web segue as regras do navegador, então as páginas são identificadas pela URL, e não pelo nome da rota. Chame usePathUrlStrategy() antes de iniciar a UXCam para que suas URLs sejam caminhos limpos em vez de fragmentos com hash e, depois, use as regras de definição de páginas no Dashboard para renomear páginas e agrupar caminhos dinâmicos, como /products/123, sob um único nome.

Seja qual for a abordagem, confira se cada tela aparece no Dashboard com duração acima de zero segundo. Uma tela com 0s geralmente indica duas marcações disparadas no mesmo quadro, muitas vezes porque a marcação automática e a manual estão ativas ao mesmo tempo.

Gravação de sessão para Flutter Web

O suporte da UXCam ao Flutter não se limita a celulares. O plugin flutter_uxcam também grava apps Flutter Web, então equipes que publicam um único código Flutter em mobile e no navegador podem analisar os dois tipos de sessão no mesmo Dashboard da UXCam. Você inicializa o plugin com uma chave de app web, e suas chamadas da UXCam para nomear telas, registrar eventos e definir propriedades de usuário continuam funcionando sem mudanças.

Os replays do Flutter Web são baseados em vídeo, e não no DOM, porque a UXCam captura o canvas em que o Flutter desenha o seu app. Isso tem alguns efeitos práticos. Você vê indicadores de toque em vez do movimento do mouse, do mesmo jeito que os gestos aparecem nos replays mobile. Um replay pode começar com uma breve tela branca antes do primeiro quadro do app, enquanto gestos, telas e eventos continuam alinhados ao vídeo desde o início. E iframes incorporados via HtmlElementView aparecem em branco, porque o navegador os renderiza fora do canvas do Flutter.

A experiência principal é a mesma nas duas plataformas: gravação de sessão, nomes de tela, eventos e propriedades de usuário funcionam no Flutter Web, e o mascaramento padrão com OccludeWrapper também é suportado. Algumas APIs são exclusivas do mobile, como os controles de gravação (pausar e retomar), o tratamento de falhas e ANRs, os métodos de consentimento opt-in e opt-out e os logs de depuração. Chamá-las na web é seguro, porque elas não fazem nada lá, mas envolvê-las em uma verificação com kIsWeb deixa a intenção clara. Heatmaps e a Tara, a analista de IA da UXCam, ainda não estão disponíveis para sessões do Flutter Web, e a página de suporte da plataforma Flutter Web traz a matriz de recursos atualizada.

Benefícios de Session Recording no Flutter

Para aplicativos criados com Flutter, a Gravação de sessão da UXCam oferece uma maneira poderosa de entender o comportamento do usuário e otimizar o desempenho. Aqui está o que você recebe:

• Integração sem esforço: o SDK Flutter da UXCam é um único pacote leve para iOS, Android e Flutter Web. A configuração leva poucas linhas de código, e a gravação começa sem que você precise marcar cada widget.

• Rastreamento de telas que acompanha a navegação do Flutter: o FlutterUxcamNavigatorObserver capta mudanças de rota do Navigator 1.0 e 2.0, então os replays se dividem em telas nomeadas sem instrumentação extra.

• Design focado em privacidade: o OccludeWrapper e as regras de oclusão do Dashboard ocultam widgets sensíveis no próprio dispositivo, e esses dados nunca chegam aos servidores da UXCam. Você obtém os insights de que precisa sem comprometer a privacidade dos usuários ou a segurança do app.

• Problemas ligados a sessões reais: falhas, congelamentos de UI e rage taps são sinalizados dentro do replay, para que você veja exatamente o que levou a cada um deles.

Visão geral da Gravação de sessão da UXCam para Flutter

A UXCam fornece Gravações de sessão de alta qualidade apoiadas por filtros poderosos, etiquetas, notas e análise de eventos. As equipes podem encontrar rapidamente as sessões que importam, assistir apenas aos momentos relevantes e colaborar em problemas diretamente dentro do Dashboard.

Cada Sessão inclui detalhes essenciais do usuário, como localização, dispositivo, falhas, congelamentos de UI e propriedades personalizadas, dando às equipes contexto completo antes de revisar o replay.

Principais componentes de uma Sessão da UXCam

Aqui estão os detalhes que você encontrará em uma gravação de Sessão da UXCam:

Barra de informações da Sessão

O painel superior do replay mostra a identificação do usuário (Alias ou ID do Usuário), localização, dispositivo, tempo da Sessão e etiquetas. Se ocorrer uma falha ou congelamento de UI, a UXCam sinaliza automaticamente. Clicar no indicador revela logs técnicos para que os desenvolvedores possam diagnosticar o problema rapidamente

Linha do tempo detalhada (Aba de Atividade)

A linha do tempo da UXCam visualiza a jornada completa entre telas e ações. Blocos representam telas e cada bloco mostra quanto tempo o usuário permaneceu. Clicar em qualquer interação salta diretamente para aquele ponto no replay, facilitando a investigação de fricção. Ícones de eventos inteligentes destacam toques, gestos, rage taps ou eventos personalizados, permitindo que você navegue pelas sessões sem assistir à gravação inteira.

Filtros avançados para encontrar sessões importantes

Os filtros da UXCam ajudam você a encontrar as sessões certas instantaneamente. Você pode refinar os resultados por:

• Ações do usuário (toques, deslizes, rolagens).

• Problemas técnicos (falhas, congelamentos).

• Atributos do usuário (dispositivo, localização, SO).

• Características da Sessão (duração, nível de engajamento).

Você também pode excluir testadores internos e filtrar por sinais de frustração, como rage taps ou dead taps. Isso ajuda as equipes Flutter a entender exatamente onde ocorrem problemas de usabilidade.

Etiquetar sessões

A UXCam permite identificar e investigar facilmente problemas de usuários com seu recurso de etiquetas. Ao adicionar etiquetas personalizadas, como "crash" ou uma mensagem de erro específica, fica mais fácil filtrar grandes volumes de sessões para encontrar aquelas que contêm informações relevantes sobre problemas potenciais. Além disso, melhora a colaboração entre as equipes de produto, design, QA e engenharia.

Deixe notas para alinhar sua equipe

Com as notas, você pode destacar problemas que um usuário possa ter enfrentado ou fornecer sugestões de melhoria diretamente em partes específicas das sessões de replay. Além disso, a colaboração da equipe torna-se mais simples; compartilhe suas notas com outros membros e dê a eles contexto significativo sobre os comportamentos observados.

Analise eventos

A análise de eventos permite que você salte de um Evento inteligente diretamente para o momento em que ele aconteceu no replay. Isso oferece insights mais rápidos sobre o comportamento do usuário em torno de ações principais, compras, toques, etapas de onboarding, tentativas falhas, etc. Você pode assistir às sessões vinculadas a esse evento ou migrar para relatórios para analisar tendências.

Privacidade e segurança na gravação de sessão com Flutter

A UXCam tem o compromisso de manter o mais alto padrão de privacidade e segurança dos dados dos usuários. Com o Cost of a Data Breach Report 2026 da IBM apontando um custo médio global recorde de US$ 4,99 milhões por violação de dados, proteções de privacidade integradas são uma salvaguarda essencial, e não um extra opcional.

O Flutter não oculta nada por padrão, então o mascaramento é algo que você configura de propósito. A ferramenta mais simples é o OccludeWrapper: passe qualquer widget como filho, de um único widget Text a uma Column inteira, e a UXCam o oculta na gravação. A oclusão acontece no dispositivo antes do envio da sessão, o que significa que o conteúdo mascarado nunca chega aos servidores da UXCam.

Para telas inteiras, como login ou pagamento, você pode aplicar um desfoque ou uma sobreposição sólida com FlutterUXBlur ou FlutterUXOverlay, em tempo de execução ou na configuração, com uma lista de nomes de tela. Os dois ocultam os gestos nessas telas por padrão, o que é exatamente o que você quer perto de campos de senha. Se preferir não publicar código para isso, as configurações de privacidade de gravação de vídeo no Dashboard da UXCam permitem gravar, ocultar ou desfocar todas as telas, ou criar regras para telas específicas. Essas opções por tela valem para iOS e Android; no Flutter Web, o OccludeWrapper é a abordagem suportada.

Consentimento e identidade também importam. Se o seu app pede permissão antes de gravar, chame FlutterUxcam.optIntoVideoRecording() ou optOutOfVideoRecording() para respeitar a escolha de cada usuário. Identifique os usuários com um ID interno em vez de e-mail ou telefone, e mantenha dados pessoais fora das propriedades de eventos e de usuários. A UXCam está em conformidade com o GDPR e a CCPA, e o guia de oclusão detalha cada opção.

Adicione eventos, identidade do usuário e contexto de falhas

As telas mostram para onde os usuários vão; os eventos mostram o que eles fazem. O guia de eventos da UXCam sugere um conjunto enxuto de 5 a 15 eventos em marcos de fluxo, uso de recursos principais, erros e cancelamentos. Registre-os com FlutterUxcam.logEvent(), ou use logEventWithProperties() para anexar até 20 propriedades, como plano ou preço. Cada evento aparece como um marcador na linha do tempo do replay, então filtrar por algo como Payment_Failed leva você direto ao momento em que aconteceu.

Dois sinais vêm sem nenhum código. Um rage tap é registrado quando o usuário toca três ou mais vezes em até 300 milissegundos no mesmo ponto, e um congelamento de UI é registrado quando a thread principal fica bloqueada por dois segundos ou mais. Filtrar por qualquer um deles é uma das formas mais rápidas de encontrar usuários frustrados em um app Flutter grande.

Quando um ticket de suporte cita um usuário específico, você quer as sessões dele, e não um alias aleatório. FlutterUxcam.setUserIdentity() substitui o alias padrão da UXCam pelo seu próprio ID de usuário, e setUserProperty() permite adicionar até 100 atributos, como tipo de assinatura ou cargo, que viram filtros e segmentos para os seus replays. O guia de propriedades de usuário traz os detalhes.

No iOS e no Android, defina enableCrashHandling como true no seu FlutterUxConfig para capturar falhas e ANRs junto com a sessão, e encaminhe os erros de FlutterError.onError para a UXCam, para que exceções tratadas também apareçam com contexto. O guia de tratamento de falhas mostra a configuração completa. A captura de falhas faz parte do SDK mobile e não se aplica ao Flutter Web.

Impacto no desempenho e controle da gravação

Muitos desenvolvedores fazem a mesma pergunta antes de adicionar qualquer SDK: “A gravação de sessão vai deixar meu app Flutter lento?”

A UXCam foi feita para não atrapalhar o pipeline de renderização do Flutter. Ela captura quadros e dados de gestos sem bloquear a thread de UI nem desacelerar animações, e as versões mais recentes pausam a captura durante rolagens ativas para manter as gravações fluidas e confiáveis. Saiba mais sobre como o SDK foi construído em por que a UXCam tem o melhor SDK do mercado de aplicativos.

Controle o que é gravado

As APIs de controle de gravação dão controle detalhado no mobile. FlutterUxcam.pauseScreenRecording() e resumeScreenRecording() interrompem a captura de vídeo em uma tela sensível enquanto a sessão continua, stopSessionAndUploadData() encerra uma sessão quando você quiser e isRecording() informa o estado atual. Você também pode iniciar a UXCam de forma condicional, por exemplo, só depois que o usuário der consentimento.

Mantenha sessões de teste fora dos dados de produção

Para manter sessões de desenvolvimento e QA fora dos seus dados de produção, inicie a UXCam apenas em builds de release ou quando a sua variável de ambiente indicar produção. Junto com filtros do Dashboard que excluem testadores internos, isso mantém seus replays focados em usuários reais e seus dados livres do ruído de testes.

Problemas do Flutter que Session Recording Resolve

A Gravação de sessão ajuda as equipes a diagnosticar problemas específicos do Flutter que são difíceis de capturar com logs ou análises. Estes incluem:

• Falhas de gestos: Às vezes, os toques não são registrados devido a conflitos no detector de gestos ou sobreposições invisíveis.

• Problemas de estouro de layout: Em certos tamanhos de dispositivos, os widgets do Flutter extrapolam ou desalinhão. A Gravação de sessão revela exatamente onde.

• Problemas de UI do teclado: O teclado geralmente cobre campos de entrada em aplicativos Flutter. Os replays mostram como os usuários lutam com formulários.

• Problemas de rolagem e lista: Rolagem infinita, cabeçalhos fixos e visualizações de lista personalizadas às vezes se comportam incorretamente.

• Congelamentos silenciosos de UI: O Flutter pode congelar devido a operações assíncronas bloqueando a thread da UI; os replays mostram o momento em que isso acontece.

• Abandono no onboarding: A Gravação de sessão descobre por que os usuários desistem durante fluxos de várias etapas.

• Problemas de layout específicos do navegador: se você publica no Flutter Web, os replays mostram onde o layout quebra em certos tamanhos de janela ou onde a entrada de dados se comporta de forma diferente no navegador.

Boas Práticas de Session Recording no Flutter

Para obter o máximo valor da Gravação de sessão, siga estas práticas recomendadas para configuração, análise e colaboração entre equipes.

1. Mascare widgets sensíveis cedo A privacidade deve ser configurada desde o início. Envolva widgets sensíveis, como campos de senha, detalhes de pagamento ou formulários de informações pessoais, com o OccludeWrapper e adicione regras de desfoque ou sobreposição para telas inteiras, como o checkout. O mascaramento garante que os dados protegidos nunca apareçam nas gravações de sessão, mantendo as gravações seguras, em conformidade e adequadas para revisão de toda a equipe.

2. Rastreie eventos principais para contexto A Gravação de sessão torna-se muito mais significativa quando combinada com dados de eventos. Ao rastrear interações como toques em botões, envios de formulários, uso de recursos e estados de erro, você dá à sua equipe o contexto necessário para entender por que os usuários se comportam daquela maneira. Combinar replays com metadados de eventos facilita a verificação da adoção de recursos, a resolução de ações com falha e a validação de decisões de design.

3. Use funis para diagnosticar desistências Os funis revelam onde os usuários abandonam fluxos de trabalho importantes, como onboarding, checkout ou cadastros. Quando você conecta esses funis a gravações de sessão, pode saltar diretamente para sessões reais onde as desistências acontecem. Essa combinação ajuda você a entender os pontos exatos de fricção que os usuários encontram e por que não conseguem concluir certas tarefas.

4. Revise sessões de diferentes dispositivos e plataformas Aplicativos Flutter costumam se comportar de maneira diferente em dispositivos com variados tamanhos de tela, poder de processamento e taxas de atualização, e o Flutter Web acrescenta navegadores e tamanhos de janela à lista. Assistir a replays de telas pequenas, tablets, dispositivos de baixo custo e navegadores desktop ajuda a identificar problemas de layout, anomalias de renderização ou lentidão de desempenho que você não verá em ambientes internos de teste controlados.

5. Envolva as equipes de produto, design e QA A Gravação de sessão é mais eficaz quando usada por várias equipes, não apenas engenharia. Product Managers podem validar se novos recursos funcionam como pretendido. Designers podem observar padrões de usabilidade e interação do mundo real. O QA pode identificar bugs mais rapidamente assistindo a replays em vez de reproduzir etapas complexas.

Crie uma melhor experiência do usuário com a UXCam

A UXCam oferece às equipes Flutter uma visão clara de como os usuários interagem com seus aplicativos no iOS, no Android e na web, desde Gravações de sessão e etiquetas de eventos até análises que priorizam a privacidade. Sua integração perfeita com Flutter, filtros intuitivos e configuração rápida a tornam uma ferramenta poderosa para descobrir fricção e melhorar a usabilidade.

Em vez de adivinhar o que os usuários experimentam, você pode assistir às sessões, rastrear gestos detalhados e ver como pessoas reais navegam no seu app. Combinada com mapas de calor, Análise de funil e insights orientados por IA, a UXCam transforma dados de comportamento complexos em insights claros e acionáveis que ajudam você a otimizar cada Jornada do usuário.

Pronto para melhorar a experiência do seu produto? Experimente a UXCam gratuitamente hoje mesmo.

Você também pode estar interessado neles;

Como as equipes usam Tara como sua analista de produto com IA

KPIs de Aplicativos: Top 51 métricas para medir performance do seu app

6 Maneiras De Melhorar as Métricas De Engajamento In-App em

Ferramentas de analytics: 5 principais softwares a serem considerados

Gravação de Sessão Móvel: O Guia Completo

19 Melhores ferramentas de análise de apps móveis 2026