Flutter: utilize animações da biblioteca Animations

Bibliotecas e animações - Apresentação

Olá! Sou Matheus, instrutor da Alura, e estamos aqui para ensinar sobre o pacote Animations (Animações) do Flutter.

Audiodescrição: Matheus Alberto é um homem de pele clara e de cabelos curtos, lisos, de cor castanho-escuro. Tem o rosto oval, sobrancelhas grossas com um corte vertical na sobrancelha direita. Tem olhos castanho-escuros, nariz e boca de tamanho médio. Está com uma camiseta preta com o logo da Alura e sentado em uma cadeira de encosto alto na cor preta. Ao fundo, uma parede iluminada em degradê das cores rosa, azul e roxo e uma estante com objetos da cultura pop no canto direito.

O que aprenderemos?

A aplicação com a qual vamos trabalhar é a Hyrule, que virá pronta. Nosso trabalho será adicionar novas animações e interações com a pessoa usuária. Adicionaremos efeitos de transição, seja de uma página para outra ou transições entre elementos dentro da mesma página, como, por exemplo, trocar listas.

Além disso, vamos aprender a lidar com páginas sem saída, que não vão a lugar algum. Mostraremos como adicionar efeitos para abrir, expandir e exibir o conteúdo, bem como fechá-lo.

Também veremos os efeitos de transição de imagens. Por exemplo, em uma informação que se repete entre duas páginas, podemos pegar alguns elementos consistentes e animá-los, sem removê-los da tela, já que as informações serão idênticas.

Vamos aprender o que são animações, por que elas existem e qual a importância de animar certos elementos. Vamos aprender exatamente quando podemos animar, além de explorarmos a questão do feedback visual para a pessoa usuária e as formas de interação.

Além disso, vamos aprender por que usar pacotes de animações e os benefícios que eles trazem para nós, seja para facilitar algum processo de trabalho ou simplesmente para adicionar novas funcionalidades em nossa aplicação.

Pré-requisitos

Para fazer este curso, é importante ter conhecimentos anteriores de Flutter — ou seja, ter completado, pelo menos, nossa formação inicial de Flutter.

Além disso, é necessário ter conhecimento dos passos anteriores da formação de Flutter com animações. Com esse conhecimento, haverá uma base sólida para seguir este curso e expandir o conhecimento de Flutter.

Gostou do conteúdo? Achou interessante? Então venha conosco! Nos encontramos no próximo vídeo. Até breve!

Bibliotecas e animações - Melhorando o projeto e baixando a biblioteca Animations

Já temos uma aplicação desenvolvida, nomeada Hyrule. Trata-se de um compêndio sobre o jogo Zelda Breath of the Wild. Neste aplicativo, é possível visualizar diversas informações sobre criaturas, equipamentos, materiais, monstros, enfim, tudo que é disponível e existe dentro do mundo de Zelda.

Entendendo a aplicação

Ao abrir o aplicativo e clicar, por exemplo, em "Creatures" (criaturas), carregamos a página de uma API que fornece uma lista de criaturas existentes, com várias informações sobre elas.

Nós também podemos alterar o tipo de lista que temos dentro do aplicativo. Atualmente, temos cartões grandes, mas podemos clicar no botão com duas setas no canto superior direito para trocar por cartões menores, ou seja, itens de listas mais simplificados, mostrando mais itens de uma vez só.

Clicando em qualquer um desses itens, tanto no cartão quanto no item da lista simplificada, temos o nome da criatura no topo, uma imagem dela no centro e uma descrição dada pelo próprio jogo embaixo, na qual há informações básicas de onde encontrá-la.

Nós podemos salvar essa entrada de detalhes, por exemplo, dentro do nosso banco de dados local. Para isso, basta clicar no botão de itens salvos ou favoritos, que possui um ícone de marca página, no canto inferior direito da tela.

Para acessar as informações salvas, podemos voltar para a página principal ou mesmo na página de alguma categoria escolhida e clicar no botão com o mesmo ícone. Clicando nele, navegamos para uma página chamada "Itens salvos" e lá conseguimos ver todos os itens de entradas que salvamos.

Podemos apagar um item, arrastando o cartão ou item de lista da direita para a esquerda, o que exibirá um botão vermelho de lixeira em seu lugar. Com isso, excluímos uma entrada.

Esta é a aplicação que já foi desenvolvida previamente. Nós tivemos uma reunião com a pessoa Tech Lead (liderança técnica) e foi decidido que algumas partes dessa aplicação podem ser melhoradas através de animações.

Veremos um exemplo muito bom de onde podemos aplicar uma animação: no momento que fazemos a troca do modelo de lista simples para o modelo de cartões e vice-versa, clicando no botão de setas do canto superior direito, temos uma transição de listas bruta. Com isso, é possível ver que existem alguns lugares onde podemos melhorar a qualidade da aplicação.

O pacote escolhido para aplicar as animações dentro do nosso projeto é a biblioteca animations do Flutter. Após essa decisão, vamos abrir o projeto no VS Code e instalá-la no nosso aplicativo.

Instalando a biblioteca animations

Uma forma de instalar essa biblioteca é utilizando o terminal. No Visual Studio Code, vamos pressionar "CTRL+J" no Windows ou "Command+J" no Mac. No terminal, vamos escrever o seguinte comando e pressionar "Enter" para executá-lo:

flutter pub add animations

Com isso, ele vai adicionar a biblioteca dentro das dependências e talvez já faça o flutter pub get para atualizar as dependências.

Outra forma de adicionar o pacote é manualmente, acessando o arquivo pubspec.yaml, na pasta raiz do projeto, por meio do explorador lateral.

Dica: Recomendamos que a adição do pacote seja feita manualmente, da maneira descrita abaixo, para garantir que a versão que estamos utilizando no vídeo seja a mesma utilizada em seu projeto, evitando diferenças como novidades ou alguma funcionalidade que deixou de funcionar por incompatibilidade de versões.

No interior do arquivo YAML, no bloco dependencies, por volta da linha 30, escreveremos a nova dependência que é a biblioteca animations. Para isso, adicionaremos uma linha vazia após a linha dio: ^5.3.2, e adicionaremos animations na versão 2.0.8.

Devemos ter muito cuidado com o espaçamento, pois o YAML tem um problema com indentação. É importante manter os espaçamentos corretos seguindo o padrão que já está dentro do arquivo.

dependencies:
    flutter:
    sdk: flutter
    
    # The following adds the Cupertino Icons font to your application.
    # Use with the CupertinoIcons class for iOS style icons.
    cupertino_icons: ^1.0.2
    floor: ^1.4.2
    sqflite: ^2.3.0
    http: ^1.1.0
    dio: ^5.3.2
    animations: ^2.0.8

Depois de salvar o arquivo pubspec.yaml e caso o Visual Studio Code não tenha feito por conta própria, podemos digitar o comando abaixo no terminal para pegar as dependências, atualizar a lista de dependências e instalar a biblioteca.

flutter pub get

Com isso, temos a nossa biblioteca instalada.

Bibliotecas e animações - Aprofundando animações e bibliotecas

Instalamos a biblioteca animations no projeto, mas por que a instalamos? O que estamos ganhando com essa biblioteca? Por que precisamos adicionar animações?

Essas são perguntas muito válidas, pois é fundamental questionar e entender o porquê de cada ação no desenvolvimento do projeto. Portanto, vamos entender o que acabamos de fazer e por que estamos com a biblioteca animations.

Por que utilizar animações?

Primeiramente, vamos entender qual é a vantagem de ter animações no projeto. No vídeo anterior, entendemos que as animações são maneiras de aumentar a qualidade da interação da pessoa usuária com aplicativo. Mas como exatamente conseguimos melhorar essa interação?

Um ótimo exemplo, no próprio aplicativo, é quando clicamos em uma categoria na tela "Escolha uma categoria" e temos uma transição de página que parte desta para a de criaturas. Essa transição comunica à pessoa usuária que ela está transitando de uma tela para outra. É uma forma de comunicação do aplicativo com a pessoa usuária.

Quando trocamos a maneira que a lista de criaturas é exibida na tela, por meio do botão de setas no canto superior direito, não temos essa transição, mas sim uma troca instantânea. Essa transição de lista é muito abrupta e troca muito rápido. Isso pode deixar a pessoa usuária desconfortável, dando a impressão de que nosso aplicativo carece de polimento.

Por isso, é importante acrescentar feedbacks visuais para que o aplicativo esteja em constante comunicação com a pessoa usuária, indicando quais são as ações que estão funcionando. Precisamos informar à pessoa usuária que a ação realizada por ela realmente teve um efeito no aplicativo.

Um ótimo exemplo disso são os cinco botões de categorias. Quando clicamos e seguramos o clique em um deles, um efeito de onda é exibido nele. Isso é uma maneira de dizer que o botão está sendo pressionado e há um tempo de carregamento que precede a troca de página.

Vamos imaginar uma situação em que não existe essa animação de onda. Clicaríamos no botão, mas a reação demoraria um pouco. Sem a animação, não conseguiríamos identificar se há algo sendo baixado internamente, ou se conseguimos interagir de fato com esse botão. Por isso que animações são importantes.

Além do feedback visual, é importante ter outros tipos de feedback. Por exemplo, pode ser útil acionar a vibração do celular ou um efeito sonoro quando um botão é pressionado. É importante ter feedbacks diferentes para pessoas com necessidades diferentes, pois pessoas com deficiências também utilizarão o aplicativo. Cada pessoa o utilizará de modo diferente.

O que é a biblioteca animations?

Bibliotecas são conjuntos de instruções, funções, objetos, entre outros, que podem implementar e facilitar trabalho durante o desenvolvimento do projeto. Neste caso, queremos adicionar uma série de animações novas e diferenciadas. Ao invés de criar as animações do zero, podemos usar um pacote que já vem com essas animações pré-definidas para poupar tempo.

Entendemos por que usar o pacote animations e por que estamos adicionando novas animações no projeto. A seguir, podemos aplicar essas animações dentro do projeto.

Nos veremos na próxima aula.

Sobre o curso Flutter: utilize animações da biblioteca Animations

O curso Flutter: utilize animações da biblioteca Animations possui 66 minutos de vídeos, em um total de 40 atividades. Gostou? Conheça nossos outros cursos de Flutter em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Bibliotecas e animações
• Animações Material
• Alternando listas
• Expandindo informações
• Transformações consistentes