Joabe Ramone

Posted on Feb 27, 2021

Splash Screen UI em Flutter

#flutter #android #splashscreen #mobile

1. Introdução

Eai clan, tudo certo?

Hoje venho falar sobre um conteúdo que muita das vezes passa despercebido mas que faz muito diferença, por que ele é a porta de entrada para os usuários dos nossos aplicativos. Eu fiz várias pesquisas sobre as boas práticas seguindo os fundamentos de design.

O termo Splash Screen traduzido significa tela inicial e surgiu da necessidade dos aplicativos carregarem todas as informações antes que o usuário pudesse acessa-lo.

Quase sempre há algumas pequenas tarefas que o seu aplicativo precisa fazer antes que o usuário possa começar a tocar nos botões e navegar nas telas. Talvez seu aplicativo precise carregar alguns dados básicos para carregar a primeira tela ou o usuário precise ser autenticado novamente porque não usa o aplicativo há algum tempo. Seja o que for, a tela inicial é o lugar perfeito para fazer isso (bem ... na maioria das vezes).

Carregamento dos dados

2. Boas práticas do uso

Existem algumas funcionalidades chave que seu aplicativo deve ter, embora você possa não ver essas funcionalidades em ação elas estão escondidas sob a superfície na maioria das telas iniciais que você vê no seu celular. Qualquer usuário que usa seu aplicativo regularmente ficará rapidamente frustrado se tiver que sentar e esperar que um aplicativo seja aberto por mais de alguns segundos.

Ninguém gosta de esperar né?! Imagina o app demorar abrir pra você falar com seu crush, TENSO NÉ haha

2.1 Três Segundos é o suficiente

Em primeiro lugar, a tela inicial deve ser rápida. Nunca mais do que 2 ou 3 segundos. Leve em consideração que se o seu aplicativo estiver sendo usado regularmente, você deve reduzir isso para 1 segundo ou até mesmo tentar remover a necessidade de uma tela inicial.

Imagine ter que esperar a tela de abertura do Whatsapp de 3 segundos toda vez que quiser enviar uma mensagem para um amigo. Nesses casos, você pode pular o Splash Screen completamente e ir direto para o conteúdo carregando tudo o que você precisa da tela principal e exibindo quaisquer erros ou problemas depois de carregados.

Então certifique-se de que se ela quebrar a regra dos 3 segundos invente uma nova estratégia.

2.2 Porta de entrada

Provavelmente você já viu que hotéis e grandes empresas gastam muito dinheiro em suas entradas grandiosas e impressionantes, isso é porque no momento em que você passa por aquela porta você sabe que está em um lugar de qualidade. O mesmo se aplica a aplicativos, no momento em que um usuário toca em seu ícone na tela inicial eles são transportados para o seu mundo.

Entrada do Motel Egytus

Então mantenha o design simples , ousado e visual. Naqueles preciosos 3 segundos, o usuário não tem tempo para digerir várias informações, então concentre-se em apresentar o aplicativo pela primeira vez de uma forma visualmente atraente.

As telas iniciais mais simples mostrarão um fundo sólido ou gradiente com o ícone do aplicativo e o título desaparecendo a vista. Dê um passo adiante e anime o ícone do seu aplicativo para dar uma sensação real de qualidade mas apenas lembre-se de manter a animação focada e simples e definitivamente não quebre a regra dos 3 segundos.

O Uber manteve a simplicidade, mas com uma animação muito boa para mergulhar você na experiência do aplicativo.

Outro exemplo de simples e ousado.

Sobre animações, não leve isso muito a sério. Alguns designers têm o hábito de exagerar e criar uma animação que conta uma grande história. O que é ótimo se o ícone do seu aplicativo tem uma história para contar. Mas lembre-se, além da primeira vez que o usuário vê isso, não fará diferença a história que você contar. Portanto, mantenha-o simples e se você realmente quiser enlouquecer peça aos seus desenvolvedores para programá-lo de forma que só mostre a animação complexa na primeira vez que o usuário abrir o aplicativo, com uma alternativa mais simples e leve para as sessões subsequentes.

A abertura pode ser muito longo para cada sessão.

E quando tiver orçamento, tempo e habilidades suficientes, você pode ir mais longe integrando sua tela inicial perfeitamente ao resto de sua experiência de usuário. A estratégia geral é projetar o plano de fundo de sua tela inicial de modo que possa se mesclar facilmente com a primeira tela de seu aplicativo.

Shazam integra seu logotipo em sua interface principal perfeitamente.

Não é uma tarefa fácil, por que esse tipo de transição só funciona com determinados aplicativos e principalmente aqueles em que o logotipo principal aparece na tela ou a tela principal do aplicativo é uma única tela com conteúdo relativamente mínimo nele.

2.3 Se o carregamento violar a regra dos 3 segundos

Claro que pode acontecer de demorar mais que 3 segundos para carregar, isso não quer dizer que seu aplicativo tenha que carregar muitos dados, mas mesmo com dados mínimos, o dispositivo pode ter uma conectividade com a Internet muito lenta e até mesmo uma única imagem pode levar mais do que alguns segundos para carregar. Nesse caso, você vai precisar usar um indicador de carregamento pode ser uma pequena roda giratória ou barra de progresso para manter seus usuários informados de que o aplicativo está fazendo algo.

Um truque incrível é mostrar o indicador de carregamento apenas após o término da animação inicial. Dessa forma, o usuário normalmente nunca o verá, mas se vir, saberá que o aplicativo ainda está funcionando e terá que esperar pacientemente até que seja concluído. Alguns aplicativos repetem sua animação inicial - mas isso não informa ao usuário que o aplicativo precisa de mais tempo, e então eles ficarão com a sensação de que você está apenas perdendo seu tempo com uma animação repetida. Portanto, faça o que fizer, mostre o indicador de carregamento assim que passar 3 segundos.

Para conteúdo que geralmente é diferente toda vez que um usuário entra em um aplicativo, por exemplo um aplicativo bancário, significa que o splash sempre será "lento", porque toda vez que você abrir o aplicativo ele vai precisar carregar novos dados. Nesses casos, é melhor você direcionar seus usuários para o conteúdo e carregar bem diante de seus olhos para que o tempo de carregamento seja dividido em duas partes. É um equilíbrio complicado de acertar, então certifique-se de fazer testes em seus aplicativos com uma conexão lenta para ter uma ideia de quanto tempo dura quando as pessoas estão usando seu aplicativo.

NuBank mostrando as duas etapas de inicialização.

2.4 Erro ao carregar o app

Embora a maioria dos erros em um aplicativo possa ser tratada com um pop-up, apresentar um pop-up na tela inicial será desagradável e frustrante para o usuário. A melhor estratégia que você pode ter aqui é isolar apenas os erros críticos. Se uma imagem está demorando muito para carregar você não precisa atrasar o usuário, você pode ignorar este erro e tentar recarregá-la na próxima tela. Mas se a conexão com a Internet estiver desligada e você não conseguir autenticar seu usuário, você realmente não pode permitir que ele passe por essa tela. Portanto, primeiro certifique-se de apresentar um erro apenas se o problema for crítico o suficiente para que o usuário não deva continuar usando o aplicativo.

Imagine um aplicativo que logo após o término da animação inicial apresenta um pop-up feio para dizer que você não tem conexão com a internet, nem elegante nem sofisticado. Em vez disso, por que não integrar o erro em sua tela inicial. Quase sempre optamos por uma mensagem de erro na própria tela inicial junto com um botão de atualização e a maioria dos casos o problema será uma simples falta de internet e portanto um botão de atualização ou atualização automática quando a conexão retorna se torna a melhor opção. Ao manter o erro integrado nesta tela você mantém uma aparência profissional no aplicativo enquanto também avisa claramente o usuário para tocar no botão de atualização.

NuBanck mostra erro de conexão diretamente na tela inicial para evitar pop-ups

2.5 Para concluir

Então lembre-se:

Mantenha a simplicidade com uma animação curta e elegante para apresentar seu aplicativo
Lembre-se sempre da regra dos 3 segundos e se passar mais que isso mostre um indicador de carregamento.
Carregue os dados mínimos absolutos do servidor, mas certifique-se de ter todas as informações necessárias para mostrar a próxima tela imediatamente.
Integre erros em sua tela inicial para evitar popups feios.

3. Como fazer em Flutter

O que é maravilhoso em Flutter é que ele já tem uma Splash Screen nativo, provavelmente se você já rodou algum projeto do Flutter deve ter visto aquela tela branca ou preta aparecendo antes de abrir seu aplicativo. Então, é apenas modificar um arquivo colocando sua logo e a cor primária do seu app.

Basicamente sim!

Cada aplicativo Android requer tempo de inicialização enquanto o sistema operacional configura o processo do aplicativo. O Android fornece o conceito de uma Splash Screen para ser exibido um Drawable durante a inicialização do aplicativo.

3.1 O que é Drawable

Quando você precisa exibir imagens estáticas no seu app, é possível usar a classe Drawable e as subclasses relacionadas para desenhar formas e imagens. Um Drawable é uma abstração geral para algo que pode ser desenhado.

É possível adicionar gráficos ao app referenciando um arquivo de imagem dos recursos do projeto. Os tipos de arquivo compatíveis são PNG (preferencial), JPG (aceitável) e GIF (não recomendado). Ícones do app, logotipos e outros elementos gráficos, como aqueles usados em jogos, são adequados para essa técnica.

Para usar um recurso de imagem, adicione seu arquivo ao diretório res/drawable/ do projeto. Quando você estiver no projeto, poderá referenciar o recurso de imagem do seu código ou layout XML. Por exemplo, consulte my_image.png como my_image.

3.2 Modificar Splash Screen

Vamos seguir os seguintes passos:

Vá até android/app/src/main/res/drawable,
abra o arquivo launch_background.xml,
tire o comentário das linhas 6 e 11,
abra a pasta mipmap
copie o nome da imagem que estiver lá dentro,
e coloque no android:src o nome da pasta e da imagem.

Pronto!

Já temos um resultado como este:

Caso não aparecer nada veja se no seu projeto tem outra pasta com o nome drawable pode ter outra como por exemplo drawable-v21.

Isso acontece por causa da sua necessidade, para imagens, você pode projetá-las para a resolução mais alta e colocá-las na pasta xxxhdpi. O Android reduzirá automaticamente a resolução para outros dispositivos. Além disso, você pode colocar drawables diferentes para resoluções diferentes. Mas eles devem ter o mesmo nome. Como por exemplo as pastas mipmap.

Então a pasta drawable-v21 vai ter o mesmo conteúdo que a drawable, se preferir.

3.3 Adicionar cores de fundo

Você pode mudar o fundo da Splash Screen de acordo com a cor principal do seu aplicativo, para colocar as cores do seu gosto é da seguinte maneira:

Vá até a pasta android/app/src/main/res/values
crie um arquivo chamado colors.xml,
adicione as cores em HEX e coloque um nome para cada cor.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#F44336</color>
    <color name="white">#FFFFFF</color>
    <color name="yellow">#FFFF00</color>
    <color name="blueGrey">#37474F</color>
    <color name="NightBlue">#233446</color>
    <color name="grey">#212121</color>
    <color name="dark">#000000</color>
</resources>

Agora você pode usar essa cor no seu drawable da seguinte forma:

<item android:drawable="@color/red" />

3.3 Tema escuro

Por padrão o Flutter cria uma configuração que deixa o fundo do nosso aplicativo de acordo com sistema operacional. Por exemplo, se você estiver com o tema escuro ativo quando você inicializar o aplicativo ele vai mostrar um fundo preto. E caso o tema escuro estiver Desativado ele mostra um fundo branco.

Mas precisamos criar um arquivo para configurar nossa Splash Screen em tema escuro.

Pra gente conseguir ver a diferença na prática vamos adicionar duas imagens de um icone do android.

Então:

Vá até android/app/src/main/res
crie uma pasta chamada drawable-night
coloque a imagem do android branco,
crie um arquivo launch_background.xml

Drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/white" />
     <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/android" />
    </item>
</layer-list>

Arquivo: values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

Drawable Night

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/dark" />
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/android" />
    </item>
</layer-list>

Arquivo: values-night/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

5 Conclusão

Uma tela de carregamento pode parecer algo simples, mas como vimos tem muito fundamento. Espero que este post possa ter te ajudado de alguma forma, não esqueça de dar like para me ajudar a continuar postando.

Valeu clan!