Flutter com animações: personalize seu app com animações implícitas

Splash Screen nativa - Apresentação

Você já tem um projeto interessante e funcional, no entanto, ele não expressa bem a identidade da sua marca ou empresa e está buscando aprimorá-lo?

Talvez seja o momento ideal para usar animações e destacar os aspectos relevantes da sua aplicação para as pessoas usuárias. É exatamente isso que vamos aprender neste curso.

Me chamo Ricarth Lima e serei seu instrutor neste novo curso de Flutter, focado em animações.

Audiodescrição: Ricarth se autodescreve como uma pessoa com cabelo black power, barba espessa, usa óculos de grau e está vestindo uma camiseta preta. Está sentado e, ao fundo, há uma iluminação em tons de azul e rosa.

Flutter com animações

Neste curso de Flutter com animações, vamos continuar um projeto que recebemos. No curso de MVC, Matheus criou o projeto "Meu Pequeno Grimório", destinado a ser lúdico e agradável, mas ele está bastante estático. Nosso desafio é trazer vida e animação a ele.

Para isso, rodaremos o projeto em nosso emulador a analisaremos a Splash Screen (tela de abertura), que é fundamental para transmitir a identidade de uma aplicação.

O aplicativo está se carregando agora e, assim que terminar, vamos examinar a Splash Screen. Ok, apareceu a história. Preste atenção e tente memorizar a Splash Screen.

Agora, analisar em detalhes como está o projeto internamente. Temos uma tela de onboarding, intitulada "Meu Pequeno Grimório" e o botão de "Entrar", que nos conduz à tela de login.

Ao clicarmos no botão de "Entrar" novamente, somos levadas à página inicial. Existe um aspecto lúdico no projeto, porém, está faltando um elemento chave para chamar a nossa atenção.

Projeto final

Agora, vamos conferir como o projeto ficará ao final deste curso. A Splash Screen já transmite melhor a identidade de nossa aplicação. Temos uma pequena animação que realça a ludicidade.

Na nossa tela de onboarding, agora temos um carrossel que diz muito mais sobre a aplicação. E quando clicamos em "Entrar", temos também uma animação no livro, passando a ideia de magia que um aplicativo chamado "Meu Pequeno Grimório" se propõe a oferecer. Incrível, não é mesmo?!

Requisitos

Para aproveitar o curso de Flutter com animações ao máximo, basta que você tenha concluído a formação de Flutter, que te oferece todo o conhecimento necessário.

Vamos nessa?!

Splash Screen nativa - Instalando Splash Screen nativa

Já temos o projeto que vamos melhorar, e sabemos quais melhorias gráficas precisamos implementar nele.

Adicionando a splash screen

O primeiro passo é adicionar uma splash screen que transmita a nossa identidade, ao invés da tela branca padrão do Flutter.

Para visualizarmos a splash screen padrão, não será suficiente apenas recarregar a aplicação no VS Code. Como o aplicativo já estará carregado, a splash screen não será exibida novamente.

É fundamental entender a função da splash screen: quando o aplicativo é aberto pela primeira vez, enquanto o carregamento está sendo feito - o carregamento nativo do Android e iOS, antes mesmo das nossas telas em Flutter - ela mostra algo para a pessoa usuária saber que o aplicativo não está travado.

Então, para visualizar a splash screen, teremos que parar a aplicação. Faremos isso através do símbolo de parada no VS Code. Depois, voltaremos ao emulador e, em seguida, no VS Code, apertaremos a tecla "F5" para executar a aplicação novamente.

Durante o carregamento, surgiu uma tela branca com o símbolo do Flutter e ela precisa ser modificada por não transmitir uma identidade visual adequada. Contudo, é essencial que as splash screens existam para que o carregamento seja feito antes da nossa primeira tela ser mostrada.

Configurando a splash screen

Agora, se retornarmos ao nosso VS Code e abrirmos o explorador no canto superior esquerdo, vamos notar que, por padrão, não há um local no Flutter — em nossas pastas — que nos permita configurar a splash screen. Não há um lugar no Flutter para isso.

Na verdade, podemos, sim, configurar a splash screen, mas as configurações são feitas nativamente dentro da pasta "android" ou "ios". A configuração da splash screen é a mesma que faríamos se estivéssemos codando um ambiente de desenvolvimento Android ou iOS nativo.

A splash screen é um elemento nativo que se relaciona com o sistema operacional (Android ou iOS). Ela não é configurada na pasta "lib". Por isso, o processo é um pouco mais complexo e requer conhecimento sobre o funcionamento do Android e do iOS.

No entanto, felizmente, o Flutter tem uma comunidade bastante aquecidade, que cria uma série de soluções. A solução que vamos usar é o flutter_native_splash.

Apesar deste pacote não ter sido criado pelo "flutter.dev", ele é muito usado no mercado e na comunidade Flutter. Além de ter o selo flutter-favorite, é mencionado na documentação do Flutter, tem uma boa popularidade e é compatível com Dart 3. Portanto, temos tudo o que precisamos saber para confiarmos neste pacote.

Para instalá-lo, existem várias formas. Estamos na página do flutter_native_splash e podemos clicar em "Installing > flutter-native-splash". Em seguida, copiaremos a linha a seguir:

flutter_native_splash: ^2.3.2

Depois, vamos voltar ao VS Code. No VS Code, vamos rolar um pouco para baixo o menu Explorer(lateral esquerda) até encontrarmos o arquivo pubspec.yaml. Vamos abri-lo. Podemos fechar o Explorer no canto superior esquerdo e colar a nossa dependência dentro da aba dependencies, mais especificamente após a linha 19. Salvando, ele será instalado.

cupertino_icons: ^1.0.2
sqflite: ^2.2.8+4
flutter_svg: ^2.0.7
http: ^1.1.0
path: ^1.8.3
flutter_native_splash: ^2.3.2

Próximos passos

Concluímos a instalação e o próximo passo é configurar o que deve ser mostrado na splash screen. Até mais!!

Splash Screen nativa - Configurando Splash Screen nativa

Já instalamos o pacote que nos ajudará a criar um splash screen nativa. Agora, precisamos configurar este pacote e faremos isto no arquivo publicspec.yaml.

Configurando a Splash Screen com Flutter Native Splash

Se você quiser entrar em detalhes, recomendo a leitura da documentação. Mas, durante o curso, você terá todas as dicas necessárias!

Vamos minimizar o navegador e retornar para o publicspec.yml. As configurações ocorrerão neste arquivo, mas fora das abas de dependencies, dev_dependencies ou flutter_test. A ideia é criar uma nova estrutura apenas para configurar o Flutter Native Splash.

Em primeiro lugar, removeremos os comentários, que é sempre uma boa prática para tornar tudo mais organizado. Então, vamos selecionar e deletar tudo que está entre as linhas 30 a 35 e 39 a 60. Por fim, deletaremos a parte final, da linha 44 até a 47.

Na linha 45, criaremos o bloco de código que servirá para configurarmos o pacote. O nome do pacote será:

flutter_native_splash:

O nome segue um padrão, exatamente o nome do pacote.

Definindo Cores e Imagem para a Splash Screen

Na linha abaixo, daremos dois espaços para a indentação e começaremos as configurações. Primeiro, a cor que vai aparecer no fundo:

flutter_native_splash:
 color:

Não é necessário decorar os códigos hexadecimais, basta copiá-los e colá-los no código.

flutter_native_splash:
 color: "#4D1245"

Essa cor é o tom de roxo que estamos usando no projeto.

Em seguida, vamos colocar uma imagem, a que aparece no centro da tela e ficará no lugar do símbolo do Flutter. Para isso, na próxima linha escreveremos image: e passaremos o caminho.

Já temos uma imagem em nosso diretório. Abrindo o explorador de arquivos no canto superior esquerdo, dentro de "assets", encontraremos a pasta "images". E dentro de "images", o arquivo grimorio.png, referente ao símbolo do Grimório. É essa imagem de grimório que utilizaremos.

Retornemos para o publicspec.yaml e fecharemos o explorador de arquivos. Na linha 47, onde escrevemos image:, vamos definir o caminho, que é assets/images/grimorio.png.

flutter_native_splash:
 color: "#4D1245"
 image: assets/images/grimorio.png

Apenas salvar não garante que essa configuração será aplicada. É necessário rodar esse pacote, assim, ele fará as configurações internas nas pastas nativas.

Então, vamos abrir o terminal e executar este pacote escrevendo:

dart run flutter_native_splash:create

Apertaremos "Enter" e ele começará a executar este pacote, que vai ao publicspec.yaml, pega as configurações que colocamos, e aplica nas pastas nativas do Android e do iOS.

O símbolo de check verde confirma que funcionou. Para testar, precisamos parar a nossa aplicação. Dando reload (recarregar), a splash screen não vai aparecer, então, pararemos a nossa aplicação, voltaremos no main.dart e apertar "run".

Estamos rodando e a tela branca com o símbolo do Flutter não pode mais aparecer. Esperamos que uma tela roxa com o símbolo do Grimório apareça.

A tela branca com o símbolo do Flutter ainda apareceu. Por que isso aconteceu?

Ajustes para o Android 12+

Consultando a documentação, notaremos que em vários pontos o Android 12 é citado como algo que precisa de uma configuração diferenciada.

Há, inclusive, um tópico falando só sobre o Android 12+, ou seja, todas as suas versões acima da 12. Este formato que definimos, cor de fundo e imagem, funciona em todas as versões anteriores à 12 e no ioS. Mas, para o Android 12, a Google decidiu que teriam vários elementos na splash screen.

Então, temos o ícone, tem um círculo que fica ao redor do ícone, um espaço de segurança que tem exatamente 1152 pixels de altura por 1152 pixels de largura e a cor de fundo. Significa que precisaremos fazer configurações diferenciadas para o Android 12. No emulador, estamos rodando uma versão acima do Android 12, então, precisamos, sim, fazer estas configurações.

No VS Code, acessaremos o publicspec.yaml, que é onde estamos configurando o pacote. Na linha 47, apertaremos "Enter" e, na próxima linha, escreveremos android_12: e identar, porque criaremos um novo sub-bloco.

Começaremos definindo a cor, color:, como "#4D124".

flutter_native_splash:
 color: "#4D1245"
 image: assets/images/grimorio.png
 android_12:
   color: "#4D1245"

Em seguida, definiremos a cor para o círculo ao redor do ícone. Se não definirmos nenhuma cor, ele ficará branco. Então, queremos que ele tenha a mesma cor de fundo, dando a impressão de que ele nem existe. Então, faremos icon_background_color:, copiaremos a cor da linha 49 e colaremos aqui também.

flutter_native_splash:
 color: "#4D1245"
 image: assets/images/grimorio.png
 android_12:
   color: "#4D1245"
     icon_background_color: "#4D1245"
    

Preparando Imagens Específicas para a Splash Screen

Por fim, precisamos definir uma imagem, image:. Poderíamos definir assets/images/grimorio.png, mas adianto que não vai funcionar. O motivo é que a borda do ícone termina na própria imagem e a imagem que a Google espera (1152 x 1152) é de um ícone no meio, que possa ficar inscrito em um círculo.

Isso já foi preparado anteriormente para ganharmos tempo. Basta acessar o explorador, abrir a pasta "assets" e adicionar os arquivos preparados. O arquivo grimorio_1152.pg tem um grande fundo com o ícone no meio, que atende nossas necessidades.

O outro arquivo, grimorio_titulo_115.png, nós usaremos mais à frente no curso.

Por enquanto, fecharemos as imagens. O que precisamos adicionar é a referência ao arquivo grimorio_1152.pg que está na nossa pasta de imagens, e não à imagem anterior.

flutter_native_splash:
 color: "#4D1245"
 image: assets/images/grimorio.png
 android_12:
   color: "#4D1245"
     icon_background_color: "#4D1245"
     image: assets/images/grimorio_1152.png
    

Testando a Splash Screen Configurada

Vamos salvar as alterações e fechar o "Explorer", pois não precisaremos mais dele. Em seguida, clicaremos no terminal e apertaremos a tecla de "seta para cima" para recuperarmos o último comando. Por fim, apertaremos "Enter" para conferir se está funcionado.

Enquanto isso, vamos parar a execução do emulador, pois sabemos que para visualizarmos a splash screen, precisamos executá-lo novamente.

Após a conclusão, aparecerá um sinal de verificação (check em verde). O próximo passo é abrir a main.dart e pressionar F5.

Agora, sim, podemos abrir o emulador e torcer para que tudo funcione corretamente, ou seja, para que a imagem apareça com o fundo roxo e o símbolo do Grimório no meio. Afinal, estamos em um dispositivo Android que é superior à versão 12 e fizemos as configurações necessárias.

O fundo roxo com a imagem do livro apareceu, transmitindo toda a identidade visual que queríamos. Muito incrível, não é mesmo!

Próximos passos

No entanto, temos um problema. Se quisermos trazer uma animação para essa splash screen, não conseguiremos fazê-lo nativamente. Precisaremos criar uma tela e, nessa tela, criamos a animação que queremos.

É exatamente isso que faremos adiante. Até mais!!

Sobre o curso Flutter com animações: personalize seu app com animações implícitas

O curso Flutter com animações: personalize seu app com animações implícitas possui 127 minutos de vídeos, em um total de 51 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:

• Splash Screen nativa
• Animações implícitas
• Carrossel e onboarding
• Lottie
• Transições de tela