Quando se trata de criar aplicativos, a estética, a escolha da fonte e a aparência geral de um aplicativo determinam se o usuário o considera de alta qualidade ou não.
Abrir animações também pode causar uma ótima primeira impressão ao definir o cenário para um aplicativo. Popular em muitos aplicativos atuais, uma animação de abertura curta e nítida pode atrair os usuários, às vezes sem nem perceber.
Embora já exista um processo oficial para criar animações no Flutter para apresentar uma tela de abertura dinâmica para aplicativos , o processo oficial tem algumas desvantagens a serem consideradas:
Ao criar para iOS, você deve criar um Storyboard do iOS para animar a abertura do aplicativo. Ao criar para Android, você deve escrever um código específico da plataforma para Android Não há suporte para web desenvolvimento ainda
Felizmente para nós, o Flutter tem um conjunto robusto de opções de animação, então podemos criar uma animação de abertura bastante atraente com código que podemos reutilizar em várias plataformas e é compatível com a web.
Para demonstrar isso, criaremos uma tela de abertura dinâmica para um aplicativo de pedido de comida chamado “Chowtime”. Quando um usuário abre o aplicativo, a primeira coisa que vê é o abridor Flutter nativo, que se parece com isto:
Você também pode ver a demonstração em seu navegador . Então, vamos começar!
Planejando o abridor
Ao projetar um abridor, devemos pensar sobre estes aspectos:
Adicionar um grande elemento que corresponda ao ícone do aplicativo que nós pode mostrar imediatamente no lançamento Como amarrar o elemento grande ao resto da tela de abertura, incluindo o nome do aplicativo Mostrando uma animação rápida antes de navegar para a tela inicial do aplicativo Adicionando animações entre cada um dos elementos anteriores para criar uma sensação de alta qualidade
Vamos ver como podemos criar esses elementos.
Criando a tela inicial de abertura no Flutter
Para criar uma imagem que é exibida imediatamente após a abertura do aplicativo, podemos usar um ferramenta de edição de gráficos como o GIMP para criar uma imagem de 512 × 512 para nosso abridor. No nosso caso, usaremos apenas a letra “C” com um fundo verde.
Se estiver buscando um conceito semelhante em seu aplicativo, você pode (e deve) use o Google Fonts para encontrar a melhor fonte para seu aplicativo , pois há um pacote google_fonts para Flutter. você pode usar facilmente suas fontes em aplicativos Flutter.
Depois de escolher uma fonte, carregue-a no editor de imagens e brinque com as cores até obter a paleta desejada para a fonte e a cor de fundo.
Você também pode usar a ferramenta conta-gotas para selecionar cores específicas. Observe o código hexadecimal das cores; usando o código hexadecimal, você pode adicionar essa cor exata no Flutter prefixando o código com 0xFF. Portanto, se a cor for 9ae79a, o equivalente do Flutter é Color (0xFF9ae79a).
Adicionando a imagem à tela inicial
Primeiro, adicione o
Salve a imagem do abridor em assets/newlogo.png. Então, devemos dizer ao flutter_native_splash qual imagem e cor de fundo usar para o resto do espaço disponível. Para fazer isso, abra pubspec.yaml e adicione as seguintes linhas:
flutter_native_splash: color:”# 9ae79a”image: assets/newlogo.png
A cor aqui é exatamente a mesma que obtivemos da cor ferramenta de seleção no GIMP, o que significa que não há prefixo 0xFF. Isso ocorre porque a cor da tela de inicialização não contém um canal alfa e não tem transparência, e o 0xFF inicial define a transparência da cor.
Agora, vamos gerar todas as nossas telas de inicialização de plataforma cruzada com base em esta imagem executando os seguintes comandos na raiz do nosso projeto:
flutter pub get flutter pub run flutter_native_splash: create
Com este código implementado, o aplicativo deve abrir com a imagem que criamos. No entanto, ele mudará abruptamente para a tela de abertura do aplicativo. Então, como amarramos nossa tela inicial recém-criada ao resto da tela inicial?
Vinculando a tela inicial à tela inicial
Olhando para a animação finalizada no início deste artigo, podemos ver que a letra “C” fica menor, revelando o resto do logotipo logo depois, seguido por uma curta animação de comida caindo em uma tigela.
Normalmente, esses tipos de animações podem se tornar bastante complicado, então, como podemos conseguir isso de forma eficiente e fácil? Nesse caso, usaremos uma animação implícita .
Primeiro, devemos especificar os objetos que queremos animar; neste caso, animando da letra “C” para o logo “CHOWTIME” expandido e redimensionando o texto. Enquanto o texto é redimensionado, devemos também aumentar os limites do objeto intermediário do widget para incorporar o restante do texto do logotipo.
Fazer isso dá ao logotipo exibido um efeito de apagamento. Para implementar essas alterações de animação, usaremos dois widgets: AnimatedDefaultTextStyle e AnimatedCrossFade.
O widget AnimatedDefaultTextStyle
Para redimensionar o texto ao longo do tempo, usamos o widget AnimatedDefaultTextStyle. Como acontece com a maioria dos widgets com o prefixo Animated, devemos especificar um tamanho de destino. Quando o tamanho do widget muda, o Flutter redimensiona automaticamente nosso texto por um período definido. Neste caso, é semelhante a:
AnimatedDefaultTextStyle (duration: transactionDuration,//a duration, set to one second curve: Curves.fastOutSlowIn, style: TextStyle (color: Color (0xFF4e954e),//nossa cor de acima, prefixado com 0xFF fontSize:! Expandido? _bigFontSize: 50,//alterar o tamanho da fonte dependendo do estado expandido fontFamily:’Montserrat’,//a fonte do Google Fonts fontWeight: FontWeight.w600,//), child: Text (“C”,),)
Quando o booleano expandido alterna e chama setState, o widget anima livremente a mudança de tamanho de grande para pequeno. Legal.
O widget AnimatedCrossFade
Agora que o “C” está animando corretamente, queremos exibir o resto do nosso logotipo enquanto o texto é redimensionado. Para conseguir isso, queremos esmaecer entre um Container vazio e uma Row que contém nosso texto de logotipo e nossa animação:
AnimatedCrossFade (firstCurve: Curves.fastOutSlowIn,//a mesma curva acima crossFadeState:! Expandido? CrossFadeState. showFirst: CrossFadeState.showSecond, duration: transactionDuration,//a mesma duração acima firstChild: Container (),//um contêiner vazio secondChild: _logoRemainder (),//uma linha contendo o resto do nosso alinhamento de logotipo: Alignment.centerLeft,//”revelar”o logotipo do centro à esquerda sizeCurve: Curves.easeInOut,),
Novamente, conforme o booleano expandido alterna, este widget é animado entre uma caixa vazia e o restante do logotipo, redimensionando o contêiner conforme necessário.
Adicionando a animação de comida no Flutter
Agora que nosso logotipo é redimensionado adequadamente, podemos encontrar uma animação que melhor representa o serviço fornecido por nosso aplicativo. Ao adicionar uma animação, podemos criar a nossa própria ou baixar uma predefinida em lottiefiles.com ; para eficiência, usaremos uma animação predefinida.
Ao procurar uma animação, é melhor escolher uma que dure dois a três segundos no máximo, comece com uma tela vazia e tenha um fundo transparente.
Esta animação alimentar atende aos nossos critérios e se alinha com o serviço do aplicativo, portanto, baixe a animação lottie arquivo no formato.json e colocá-lo em nossa pasta de ativos, pubspec.yaml.
Novamente, na pasta raiz do aplicativo, execute o seguinte comando para instalar o lottie em
nosso projeto:
Ao adicionar a animação à nossa tela de abertura, queremos estar atentos ao seguinte:
Defina uma largura e altura, caso contrário, a animação será muito grande Defina um AnimationController para redirecionar para o página inicial do aplicativo quando a animação terminar
Nosso widget LottieBuilder.asset tem a seguinte aparência:
LottieBuilder.asset (‘assets/food.json’, onLoaded: (composição) {_lottieAnimation..d uração=composição.duração;//define a duração do nosso AnimationController para o comprimento da animação lottie}, frameRate: FrameRate.max,//torna a animação mais suave repeat: false, animate: false,//não inicia a animação imediatamente altura: 100, largura: 100, controlador: _lottieAnimation,)
Configurando o tempo da animação
A única coisa que falta fazer agora é adicionar o tempo apropriado para as animações implementando as seguintes durações:
o splash inicial por um segundo Alterando expandido para verdadeiro e chamando setState para executar a animação implícita e o crossfade simultaneamente Esperando que o texto seja redimensionado e o crossfade termine Iniciando a animação da tigela de comida Redirecionando o usuário para a tela inicial
Programaticamente, se parece com isto:
Future.delayed (Duração (segundos: 1)).then ((valor)=> setState (()=> expandido=verdadeiro)).then ((valor)=> Duração (segundos: 1)).then ((value)=> Future.delayed (Duration (seconds: 1)). Then ( (valor)=> _lottieAnimation.forward (). then ((valor)=> Navigator.of (context).pushAndRemoveUntil (MaterialPageRoute (builder: (context)=> HomePage ()), (route)=> false),) ,),);
E é isso! Agora temos uma tela inicial totalmente animada para nosso aplicativo que funciona no iOS, Android e na web e se anima sempre que a abrimos.
Conclusão
É bastante fácil de usar o Flutter’s ferramentas de animação integradas para criar uma tela de inicialização visualmente atraente para os usuários. Com o suporte para flutter_native_splash do Flutter, não precisamos escrever nossas animações para cada plataforma em que usamos nosso aplicativo.
Você pode encontre o código-fonte completo do aplicativo de amostra aqui , que você pode bifurcar e brincar o quanto quiser. Feliz hacking!
