Splash Screen com Animações no Flutter usando Flare.
Guia rápido para implementar uma Splash Screen e suas primeiras animações no Flutter.
Olá amantes do Flutter de todo Brasil, já se surpreenderam com o Flutter hoje? Acabei de me surpreender com ele mais uma vez e decidi contar essa história em forma de um tutorial rápido.
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
A um tempo estava querendo adicionar algumas animações para o meu projeto pessoal e por isso decidi estudar um pouco sobre animações com o Flutter, logo encontrei alguns materiais sobre a integração do Flutter com o Flare. Mas o que é o Flare?
Depois de estudar e conseguir implementar ao meu aplicativo, percebi que realmente é muito rápido começar com animações no Flutter. Então, vamos ao tutorial
Tutorial
O objetivo é implementar uma Splash Screen com animação de loading para o projeto padrão do Flutter. Primeiro, abra o seu IDE de preferência, no meu caso estou utilizando o Android Studio, e inicie um novo projeto Flutter. Caso você não saiba como faze-lo, aqui temos um artigo explicando mais sobre o tema.
Configurando o Pubspec.yaml
Com o projeto criado, primeiro iremos adicionar os packages que nos auxiliarão nessa jornada. O primeiro é o splashscreen que é utilizado para implementar uma splashscreen ao nosso aplicativo de forma mais rápida. O segundo é o flare_flutter que dá suporte ao uso de animações flare. Abra o seu pubspec.yaml e adicione os dois packages nas depêndencias.
Com os packages adicionados as dependências, se você estiver utilizando o Android Studio, pode clicar no botão Packages get ou ir no terminal e rodar o comando flutter pub get.
Vocês podem acessar a versão atual dos packages em https://pub.dev/, lá também encontrarão um tutorial mais detalhado de como utilizar cada package.
Implementando a SplashScreen.
Para adicionar a splashscreen, criaremos um outro arquivo .dart ao nosso projeto, clique com o botão direito em cima da sua pasta lib, depois em new e por último dart file, dê o nome de splashscreen para o seu novo dart file.
O seu diretório deve ficar parecido com o da imagem acima, agora abrimos o arquivo splashscreen.dart e o primeiro passo é importar os 3 pacotes que vamos utilizar.
Começaremos criando um StatefulWidget para implementar nossa splashscreen page, digite o atalho stful e ao aparecer a sugestão aperte um tab que o IDE escreverá a base de um StatefulWidget com opção para preenchimento do nome, dê o nome de SplashScreenPage. Substitua o Container por um MaterialApp e adicione ao construtor home o SplashScreenWidget(), que criaremos em seguida, o resultado final será como no código abaixo.
Para criar nosso SplashScreenWidget, digite o atalho stless e ao aparecer a sugestão do IDE aperte o tab e ele escreverá a base para um StatelessWidget. Apague o Container que o comando colocou como padrão e adicione um Stack, o primeiro filho será o SplashScreen widget importado do package e o segundo uma Column.
O SplashScreen recebe alguns construtores, o seconds determina quanto tempo nossa SplashScreen vai durar e ele recebe uma double, coloque como 5, dessa forma, nossa SplashScreen vai durar 5 segundos. O próximo é o backgroundcolor, que deixaremos como branca setando como Colors.white e o terceiro, navigateAfterSeconds, recebe o widget que o aplicativo deve navegar após a splashscreen, no caso do projeto padrão do Flutter esse Widget é o MyHomePage.
Para configurar o restante da nossa splashscreen, primeiro adicionaremos uma imagem ao centro, o logo do Flutter, como o foco do tutorial é ensinar a utilizar as animações, apenas mostrarei o código dessa implementação.
Voltando ao arquivo main.dart, precisamos trocar a página inicial do nosso aplicativo para a SplashScreenPage que criamos anteriormente.
Configure seu emulador, pode ser um virtual ou o seu próprio celular e aperte no ícone com o símbolo de Play se você estiver utilizando o Android Studio, ou simplesmente digite o comando flutter run no seu terminal. A SplashScreenPage deve estar como a imagem abaixo.
Animações
Iniciando com a animação, o primeiro passo é criar uma conta no site rive.app/. Depois disso, precisamos escolher a animação que será adicionada a tela, para isso utilize a aba explorar pesquisando por alguma palavra chave de acordo com a animação que você deseja. Nesse tutorial utilizaremos uma animação de loading, mais especificamente, a desse link, criada pelo MIkhail Krassavin.
Nessa etapa é importante utilizar o navegador Chrome ou o Mozilla, já que o Rive ainda não apresenta suporte total a outros navegadores
Acessando a pagina da animação, clique no botão “Open in Rive” no menu do lado direito, seremos direcionados para a página de edição da animação, nessa página, procure o botão no canto superior direito para exportar a animação, a seguinte caixa de diálogo deve ser aberta.
Clique em “Export” e o download de um arquivo .flr deve começar. Salve esse arquivo em uma pasta chamada assets (Essa pasta você deve criar) na raiz do seu projeto Flutter e deixe ele nomeado como loading.flr . Adicione esse arquivo ao assets no arquivo pubspec.yaml, assim como fazemos para adicionar imagens ao aplicativo e depois rode o comando package get.
Nesse tutorial, para simplificação, usamos a animação como foi criada, mas é possível fazer um fork da animação para seus arquivos e edita-la como você desejar.
No arquivo splashscreen.dart, adicionaremos a animação ao nosso SplashScreenWidget. Acrescente mais um filho a coluna, um Widget Center que recebe como filho um Container, esse container terá 200 de width e 200 de height. O filho desse Container sera o Widget chamado FlareActor, ele é um widget do pacote flare_flutter que importamos. O FlareActor recebe 3 construtores básicos, o primeiro é uma String que é o caminho para nossa animação, nesse caso é “assets/loading.flr”, o segundo construtor é o animation, ele também recebe uma String com o nome da animação que queremos utilizar. Para sabermos o nome da animação precisamos voltar a página dela no Rive e no canto inferior esquerdo olhamos a aba “Animations”, assim podemos encontrar o nome da animação que iremos utilizar, para esse exemplo é “loading”. Por último, ele recebe um construtor fit e preencheremos ele com BoxFit.contain para que a animação se encaixe completamente no Container. O resultado final ficará assim.
Dê um hot reaload na sua aplicação e o resultado final deve ser o seguinte.
Conclusão
Com isso podemos ver o quão prático e rápido é o Flutter nesse quesito, com apenas 5 linhas de código implementamos uma animação na tela. Existem animações mais complexas e mais legais, mas para dar um start nesse mundo de animações com o Flutter esse é um resultado muito legal. Essa foi minha primeira experiência escrevendo um relato/tutorial com o Flutter e vou tentar trazer mais artigos em português sobre animações e outros temas também.
Quem quiser conferir o projeto completo, basta conferir meu GitHub.
