loading...

Flutter — animação simples com Flare — Parte final

lukesilva_dev profile image 🐙 Lukão 🐙 ・2 min read

Chegamos à última parte dessa série!

Parabéns!!!

Nesta postagem, iremos :

  • Adicionar a animação em um app flutter;
  • Mostrar a aplicação prática das animações

Mãos à obra

Caso tenha seguido o tutorial desde o começo, já criou um projeto. Caso não tenha criado, abra sua IDE favorita (ou terminal) e crie um!
Apague tudo, crie a main e um stateless widget chamado MyApp() conforme o código abaixo:

Agora crie um stateful widget chamado “AnimationScreen”, o qual será o corpo do MaterialApp usado em “MyApp”

Crie uma pasta no projeto chamada “assets” e coloque a animação nela. Agora adicione a pasta no arquivo pubspec.yaml. Aproveite também para adicionar o plugin “flare_flutter” no projeto.

Com tudo configurado, adicionar a animação é o processo mais simples:

Adicionei um Scaffold, e no corpo dele, um Container filho de um Center. Até aqui, nada de diferente. Adicionei altura e largura ao container, que serão diretamente responsáveis pelo tamanho do android. O “segredo” foi utilizar o widget FlareActor(), disponível no pacote flare_flutter. O primeiro argumento é o caminho do arquivo, e o segundo, o nome da animação criada na flare. Simples, não?

Animação final

Se tudo deu certo, sua animação ficará conforme a GIF acima (tirando a bugada ao final, que foi proveniente de erro na hora gravar mesmo)!
Mas beleza! Agora que passamos por todo esse processo, fica a pergunta: como vou usar isso ?

SplashScreens

Animação para splashscreen

SplashScreens, ou telas iniciais, são aquelas que aparecem enquanto o aplicativo precisa carregar algum dado ou algum configuração inicial.
A tela acima foi criada com flutter a partir do curso https://www.udemy.com/course/curso-completo-flutter-app-android-ios/ , o qual eu recomendo aqui =D (sem ganhar nada por isso haha). Além desse app, Daniel Ciolfi ensina desde o básico até como lançar apps nas app stores!
O vídeo a seguir, criado pelo canal FilledStacks, demonstra como as animações em flare podem ser utilizadas para animar menus:

Agora que já passamos pelo básico, cabe a você criar novas animações! Caso precise de ajuda, me mande um salve aqui ou no twitter! Valeu mesmo por passar por todo esse texto, e se puder, me ajude compartilhando, ok ?
Valeu !

Código completo aqui

Discussion

pic
Editor guide