Turbinando seu PageView no Flutter com Animações Impactantes
No Flutter, temos um widget chamado PageView, que basicamente nos permite criar páginas que podemos navegar por índice ou por rolagem. Sua navegação ao “scrollar” tem transições que, claro, podemos remover, mas neste artigo iremos turbinar esse recurso adicionando animações suplementares.
É uma técnica bem simples. Com ela, você não ficará presa apenas às animações que vou exemplificar, podendo criar as suas próprias com esse conceito.
Este código é basicamente um projeto Flutter simples em um único arquivo para que você possa reproduzir rapidamente o exemplo. Na coluna, temos o ListViewWidget que vamos criar posteriormente. Nele, está a nossa PageView onde vamos trabalhar.
No código acima, temos uma implementação básica do PageView, ainda sem animação, à qual vamos adicionar posteriormente.
No código abaixo, adicionamos um PageController para nossa PageView. Nesse PageController, adicionamos um listener para que toda vez que a página mudar, atualizemos nossa tela com a posição da página, armazenada na variável _currentPage. Depois disso, podemos focar na própria animação.
Um resumo conciso sobre animação: no nosso contexto, animação é o efeito causado pela interpolação (variação) entre dois pontos de uma reta. Por exemplo, a variação entre 0 e 1, onde 0 representa o início da animação e 1 o seu término. A transição ocorre de forma gradual, passando por valores fracionados, como por exemplo 0, 0.1, 0.2, até 1.0, ao invés de mudar diretamente de 0 para 1. Essa variação progressiva é o que cria o efeito de transição suave.
A _currentPage, que vem do pageController.page, nos fornece a posição em tempo real da página durante o scroll, como observado abaixo. O truque está em extrair a parte fracionária desse valor, já que ele varia entre 0 e 1. Com isso, podemos acompanhar o progresso do scroll da PageView."
Aqui, na linha 34, exatamente isso foi feito: removemos a variação do índice da página em tempo real do controller, resultando no valor fracionário dentro do intervalo limitado entre 0 e 1. Com isso já podemo animar page view como quisermos. Logo abaixo da linha temos:
- No
lerpInterpolationTranslate, simplesmente usamoslerpDoubleapenas para obter uma variação entre 0 e 0.6 do translate. Já que temos uma variação entre 0 e 1, podemos criar subvariações semelhantes para o scale, como no exemplo. - No
lerpInterpolationScale, fazemos o mesmo, usandolerpDoublepara criar uma subvariação de 0.9 a 1 para a escala.
No offset do translate, podemos brincar ajustando o valor do lerpInterpolationTranslate, por exemplo, multiplicando-o por 200. Isso significa que quando o valor for 0, a posição vertical será 0, mas quando atingir 0.6, ela será 200. Claro, essa variação ocorre no intervalo entre 0 e 0.6, produzindo esse efeito no translate.
Voilà! Temos a animação mostrada no início do artigo. Espero que tenha gostado!
Você pode ter acesso a mais conteúdos como este ao entrar na comunidade Flutter Brasil no Discord.
