Construindo uma Splash Screen em Flutter

No post anterior aqui do blog, eu demonstrei como criar um projeto Flutter no Android Studio e nossa primeira implementação utilizando este framework foi feita (um simples Hello World.. Mas já é um começo kkkk). Isso serviu para nos familiarizarmos com o Flutter e seus widgets.

No post de hoje, eu irei desenvolver uma parte importante de um app, aquela que não pode faltar e é a porta de entrada do usuário antes dele usar o app…. A Splash Screen (gostou do suspense? kkk). O exemplo de tela vai ser bem simples. Ela irá conter uma imagem e será exibida durante alguns segundos antes de redirecionar para a tela principal do aplicativo.

Sem mais bla bla bla… Vamos ao código.

Após criarmos o projeto no Android Studio, precisamos criar uma pasta chamada imgs na raiz do nosso projeto. Essa pasta servirá para armazenar a imagem que será exibida na nossa splash screen. Para o exemplo desse post, renomeei a imagem para icon.png.

Apesar de a imagem estar armazenada nas pastas do projeto, ainda não é possível fazer uso dela no código. Para resolver isso, precisamos abrir o arquivo pubspec.yaml, remover os comentários da seção assets e inserirmos o endereço imgs/icon.png. Abaixo é possível ver como ficou o arquivo pubspec.yaml após a modificação:

Com a imagem já disponível para uso, podemos iniciar a implementação da splash screen. Com esse objetivo criaremos uma classe chamada Splash, a qual será do tipo stateful. Nessa classe, precisamos sobrescrever o método initState. Dessa forma, no initState, faremos uma chamada ao método setEnabledSystemUIOverlays contido na classe SystemChrome presente na API do Flutter. O setEnabledSystemUIOverlays tem por objetivo definir quais sobreposições (a barra de status do Android, por exemplo) serão exibidas durante a execução do app. Como na splash screen não queremos que nada a sobreponha, passamos com parâmetro uma lista vazia.

No initState também precisamos fazer o redirecionamento da splash screen para a tela seguinte que deverá ser aberta. Para isso, faremos uma chamada ao método delayed da classe Future passando como parâmetro um Duration de 4 segundos. Isso fará com que a splash screen seja exibida durante 4 segundos antes da troca de tela ser feita. Por fim, o método pushReplacement da classe Navigator é utilizado para executar a troca da tela sem possibilitar o retorno à anterior.

Com o nosso initState finalizado, o que resta é implementarmos o widget que será retornado contendo a nossa imagem centralizada quando a splash screen for aberta. Essa implementação e toda a classe Splash pode ser vista abaixo:

Como queríamos remover as sobreposições apenas na splash screen, é necessário fazer uma chamada ao método setEnabledSystemUIOverlays passando como parâmetro o valor SystemUiOverlay.values no initState da classe MyHomePage (tela seguinte a splash) para que a tela volte ao posicionamento normal.

Pronto, nossa splash screen está pronta! O gif abaixo mostra o funcionamento:

O código fonte do projeto implementado neste post pode ser encontrado no seguinte link: https://github.com/luizmarcus/Flutter/tree/master/splash_screen

Bom, é isso. Qualquer dúvida, deixa um comentário.

Deixe uma resposta