126 – Animações HERO em FLUTTER – Curso de Flutter Avançado

Playlist: Curso Grátis de FLUTTER e DART Completo

Animações de Hero em Flutter

O hero se refere ao widget que voa entre as telas.
Crie uma animação de hero usando o widget Hero do Flutter.
Voe o hero de uma tela para outra.
Animar a transformação da forma de um hero de circular para retangular enquanto voa de uma tela para outra.
O widget Hero no Flutter implementa um estilo de animação comumente conhecido como transições de elementos compartilhados ou animações de elementos compartilhados.
Você provavelmente já viu animações de heros muitas vezes. Por exemplo, uma tela exibe uma lista de miniaturas representando itens para venda. Selecionar um item o leva para uma nova tela, contendo mais detalhes e um botão “Comprar”. Voar uma imagem de uma tela para outra é chamado de animação de hero em Flutter, embora o mesmo movimento seja às vezes chamado de transição de elemento compartilhado.

Você pode querer assistir a este vídeo de um minuto apresentando o widget Hero:

Este guia demonstra como criar animações de hero padrão e animações de hero que transformam a imagem de uma forma circular em uma forma quadrada durante o vôo.

Exemplos: este guia fornece exemplos de cada estilo de animação de hero nos links a seguir.

Código de animação hero padrão
Código de animação do hero radial
Novo no Flutter? Esta página pressupõe que você saiba como criar um layout usando os widgets do Flutter. Para mais informações, consulte Construindo Layouts no Flutter.

Terminologia: Um roteiro descreve uma página ou tela em um aplicativo Flutter.

Você pode criar esta animação em Flutter com widgets Hero. À medida que o hero anima a partir da origem até a rota de destino, a rota de destino (menos o hero) desaparece. Normalmente, os heros são pequenas partes da interface do usuário, como imagens, que ambas as rotas têm em comum. Do ponto de vista do usuário, o hero “voa” entre as rotas. Este guia mostra como criar as seguintes animações de hero:

Animações de hero padrão

Uma animação de hero padrão leva o hero de uma rota a uma nova rota, geralmente aterrissando em um local diferente e com um tamanho diferente.

O vídeo a seguir (gravado em baixa velocidade) mostra um exemplo típico. Tocando as nadadeiras no centro da rota, voa para o canto superior esquerdo de uma nova rota azul, em um tamanho menor. Tocando as nadadeiras na rota azul (ou usando o gesto da rota de volta para a anterior), as nadadeiras voltam para a rota original.

Animações de hero radial

Na animação do hero radial, quando o hero voa entre as rotas, sua forma parece mudar de circular para retangular.

O vídeo a seguir (gravado em baixa velocidade) mostra um exemplo de uma animação de hero radial. No início, uma fileira de três imagens circulares aparece na parte inferior da rota. Tocar em qualquer das imagens circulares envia essa imagem para uma nova rota que a exibe com uma forma quadrada. Tocar na imagem quadrada leva o hero de volta à rota original, exibida com uma forma circular.

Antes de passar para as seções específicas das animações hero padrão ou radial, leia a estrutura básica de uma animação de hero para aprender como estruturar o código de animação do hero e, por trás das cenas, entender como o Flutter executa uma animação de hero.

Estrutura básica de uma animação de hero
Qual é o ponto?
Use dois widgets de hero em rotas diferentes, mas com tags correspondentes para implementar a animação.
O Navegador gerencia uma pilha contendo as rotas do aplicativo.
Empurrar uma rota ou percorrer uma rota a partir da pilha do Navegador aciona a animação.
A estrutura Flutter calcula uma interpolação de retângulo que define o limite do hero à medida que voa da origem até a rota de destino. Durante o voo, o hero é movido para uma sobreposição de aplicativo, para que apareça no topo de ambas as rotas.
Terminologia: Se o conceito de interpolações ou interpolações for novo para você, consulte o tutorial Animações no Flutter.

As animações de hero são implementadas usando dois widgets Hero: um descrevendo o widget na rota de origem e outro descrevendo o widget na rota de destino. Do ponto de vista do usuário, o hero parece ser compartilhado e somente o programador precisa entender os detalhes dessa implementação.

Nota sobre as caixas de diálogo: os heros voam de um PageRoute para outro. Diálogos (exibidos com showDialog (), por exemplo), usam PopupRoutes, que não são PageRoutes. Pelo menos por enquanto, você não pode animar um hero para um diálogo. Para desenvolvimentos posteriores (e uma possível solução alternativa), observe este problema.