124 – Animações em FLUTTER – REFACTORING – Curso de Flutter e Dart
Playlist: Curso Grátis de FLUTTER e DART Completo
Refatoração com o AnimatedBuilder
Um AnimatedBuilder entende como renderizar a transição.
Um AnimatedBuilder não sabe como renderizar o widget nem gerencia o objeto Animation.
Use o AnimatedBuilder para descrever uma animação como parte de um método de construção para outro widget. Se você simplesmente quiser definir um widget com uma animação reutilizável, use AnimatedWidget.
Exemplos de AnimatedBuilders na API Flutter: BottomSheet, ExpansionTile, PopupMenu, ProgressIndicator, RefreshIndicator, Scaffold, SnackBar, TabBar, TextField.
Um problema com o código no exemplo do animate3 é que alterar a animação exigia a alteração do widget que renderiza o logotipo. Uma solução melhor é separar responsabilidades em classes diferentes:
Renderize o logotipo
Definir o objeto de animação
Renderize a transição
Você pode realizar essa separação com a ajuda da classe AnimatedBuilder. Um AnimatedBuilder é uma classe separada na árvore de renderização. Assim como o AnimatedWidget, o AnimatedBuilder escuta automaticamente as notificações do objeto Animação e marca a árvore do widget como necessário, para que você não precise chamar addListener ().
Árvore de widgets do AnimatedBuilder
Começando pela parte inferior da árvore de widgets, o código para renderizar o logotipo é simples:
Os três blocos intermediários no diagrama são todos criados no método build () em GrowTransition, mostrado abaixo. O widget GrowTransition em si é sem estado e contém o conjunto de variáveis finais necessárias para definir a animação de transição. A função build () cria e retorna o AnimatedBuilder, que usa o método (construtor Anônimo) e o objeto LogoWidget como parâmetros. O trabalho de renderizar a transição realmente acontece no método (Construtor Anônimo), que cria um Contêiner do tamanho apropriado para forçar o LogoWidget a reduzir para caber.
Um ponto complicado no código abaixo é que o filho parece ter sido especificado duas vezes. O que está acontecendo é que a referência externa de filho é passada para o AnimatedBuilder, que a transmite para o fechamento anônimo, que então usa esse objeto como seu filho. O resultado líquido é que o AnimatedBuilder é inserido entre os dois widgets na árvore de renderização.
Animações simultâneas
Qual é o ponto?
A classe Curves define uma matriz de curvas comumente usadas que você pode usar com um CurvedAnimation.
Nesta seção, você desenvolverá o exemplo de monitorar o progresso da animação (animate3), que usou o AnimatedWidget para animar a entrada e a saída de forma contínua. Considere o caso em que você deseja animar a entrada e a saída enquanto a opacidade é animada de transparente para opaca.
Nota: Este exemplo mostra como usar várias interpolações no mesmo controlador de animação, onde cada interpolação gerencia um efeito diferente na animação. É para fins ilustrativos