Um problema muito comum no Flutter é o travamento da interface, afetando animações, CircularProgressIndicator e outras interações da UI.
Isso acontece porque o Flutter executa todo o código na thread principal, que antes da versão 3.29 era dividida em duas: uma para o Flutter e outra para o Dart.
A arquitetura do Flutter utiliza um Event Loop, um conceito amplamente utilizado e muito eficiente em tecnologias como Node.js, onde eventos são processados de forma sequencial na mesma thread.
Porém, ao executar tarefas pesadas, como conversão de JSON, leitura de arquivos ou cálculos complexos, podemos sobrecarregar essa única thread, resultando em travamentos perceptíveis.
🔍 Como Identificar o Problema?
Você pode notar esse problema quando um indicador de carregamento (Spinner ou CircularProgressIndicator) congela abruptamente antes de exibir o conteúdo final. Veja o exemplo:
📌 O CircularProgressIndicator estava rodando normalmente, mas de repente congela e só retorna quando a operação termina.
O que aconteceu? Veja o código abaixo:
Parece um repositório simples onde eu faço a busca das issues do github e depois um loop realizando uma regra de negócio específica e depois a junção e conversão da resposta em um modelo.
E aí está o problema! O Event Loop estava processando normalmente o CircularProgressIndicator, mas assim que recebeu um novo evento — a resposta do processo assíncrono — precisou interromper sua execução para processá-lo. Infelizmente, essa operação demorou mais do que o esperado, congelando a UI até que fosse concluída.
Neste exemplo, o travamento ficou evidente, mas você pode ter enfrentado esse problema em algum app sem nem perceber. Talvez um scroll engasgando, uma animação travando, ou uma tela que parece “presa” antes de carregar completamente.
Tá bom Rahman mas qual a solução?🤔🔥
Isolates no Flutter:
Os Isolates são a forma do Dart de lidar com execução paralela sem compartilhar memória. Diferente de threads tradicionais, cada Isolate possui seu próprio espaço de memória e se comunica com outros Isolates por meio de mensagens.
No Flutter, o código da aplicação roda em um Isolate principal, responsável pela UI. Se uma tarefa demorada for executada nesse Isolate, a interface pode travar. Para evitar isso, podemos criar Isolates secundários, que processam tarefas pesadas sem impactar a fluidez da aplicação.
Essa abordagem garante que operações complexas, como parsing de JSON, processamento de imagens ou cálculos matemáticos, ocorram em segundo plano, mantendo a experiência do usuário suave e responsiva. 🚀
A Solução:
Isolates é a solução ideal porém você deve estar pensando, poxa vou precisar de toda a complexidade de um isolate somente pra isso?
E a resposta é NÃO!
A Partir do Dart 3 a google adicionou um novo recurso para simplificar o Isolate e ele seria o Isolate.run
O que é Isolate.run?
O Isolate.run é uma forma simplificada de executar código em um Isolate sem precisar gerenciar manualmente SendPort e ReceivePort. Ele abstrai a criação do Isolate, permitindo rodar tarefas pesadas de forma assíncrona.
Pronto aí está a solução veja como ficou o nosso repository agora:
Primeiro identificamos que o problema estava no nosso loop e na conversão correto? Sendo assim envolvemos esse código em um Isolate.run abrindo uma nova thread para executar esse processo porém aguardando a execução e o retorno corretamente.
E agora veja o resultado:
Uma interface fluida e sem travamento ;-)
Veja o vídeo completo dessa implementação no meu canal do youtube:
Flutter travando com JSON? Aprenda a usar Isolates para melhorar a performance!
Top comments (0)