Como adicionar uma tela inicial nativa e um ícone de aplicativo no Flutter

Publicado em 27/09/2022 por cacpnrj

Tempo de leitura: 2 minutes

Um logotipo de aplicativo é um aspecto muito importante para criar um aplicativo pronto para produção. Um logotipo de aplicativo representa a marca, o conceito e a visão por trás do aplicativo. Considerando que um tela de abertura ajuda seu usuário a fornecer uma melhor experiência de usuário. É muito importante usar uma tela inicial que aprimore e aumente a interação dos usuários com o aplicativo. Uma melhor experiência do usuário também direciona o tráfego para seu aplicativo.

Neste artigo, vamos implementar a tela inicial do flutter nativo e o ícone do aplicativo nativo personalizado do flutter .

Nota: – Antes de começar, certifique-se de ter uma pasta de ativos em seu projeto de Flutter com as imagens que deseja mostrar na tela inicial e no logotipo do aplicativo.

Conteudo

Por que usar a tela inicial nativa?

Você pode perguntar, por que usar splash nativo quando podemos construir uma tela inicial com o framework flutter?

Vantagens

Há duas grandes vantagens de usar o Tela inicial nativa dentro do seu aplicativo.

Em dispositivos de baixo custo, o mecanismo do flutter demora para iniciar o aplicativo e, enquanto isso, mostra uma tela branca. Para evitar essa tela branca, podemos usar o splash nativo. A tela inicial nativa cobre o tempo que levará ao iniciar o mecanismo de flutter e melhora a experiência do usuário.
A tela inicial nativa é muito fácil de implementar, enquanto a codificação de uma tela em flutter leva muito tempo quando comparada à tela inicial nativa.

Desvantagem

Por ser nativo,
você como desenvolvedor de flutter não tem muita liberdade com a aparência da tela inicial. Por exemplo, se você deseja redimensionar a imagem, não pode fazê-lo no flutter, precisa redimensionar sua imagem.

Então, vamos começar a implementar a tela Native Splash primeiro. Usaremos um pacote para integrar a tela inicial chamado flutter_native_splash .

Implementação de tela inicial nativa

Passo 1 :- Acesse o link Native Splash . Adicione este pacote ao seu

dependencies:
  flutter_native_splash: ^2.1.0

Passo 2:- Adicione as seguintes linhas de código ao seu

flutter_native_splash:
  color: "#ffffff";
  image: "assets/images/native.png";
  android: true
  ios: true

Aqui, ‘color’ refere-se à cor de fundo e a ‘imagem’ segue o caminho do seu arquivo de imagem, definindo android e ios como true permite o splash nativo no android e ios em um aplicativo de flutter.

Nota:- Fique atento com o recuo, dado no código acima.

Passo 3:- Execute o seguinte comando no seu terminal.

flutter pub get packages

flutter pub run flutter_native_splash:create

Passo 4: – Reinicie seu aplicativo e ele mostrará uma tela inicial nativa.

Agora, vamos implementar rapidamente o logotipo personalizado do aplicativo nativo em seu projeto de aplicativo flutter.

Ícone de aplicativo personalizado nativo no Flutter

Passo 1: – Vá para os ícones do Flutter Launcher. Adicione este pacote ao seu arquivo pubspec.yaml.

flutter_launcher_icons: ^0.9.2

Passo 2: – Adicione as seguintes linhas de código no seu

flutter_icons:
  image_path: "assets/images/appicon.png";
  android:  true
  ios: true

Aqui, ‘imagem’ refere-se ao caminho da imagem em seu projeto de Flutter. Android e iOS usam boolean como argumento, declarando-o como verdadeiro significa que você deseja mostrar logotipos de aplicativos para ambos os sistemas operacionais.

Passo 3: – Execute este comando no seu terminal.

flutter pub get packages

flutter pub run flutter_launcher_icons:main

Voilá, está feito.

Agora você tem uma tela inicial de trabalho e seu ícone de aplicativo personalizado em seu aplicativo de Flutter.

Nota:- Certifique-se de usar apenas png, jpg e jpeg. Ambos os pacotes não suportam o formato svg.

O código completo é dado abaixo:

flutter_native_splash: ^2.1.0  #for splash screen
  flutter_launcher_icons: ^0.9.2 #for app icon

flutter_native_splash:
  color: "#ffffff";
  image: "assets/images/native.png";
  android: true
  ios: true

flutter_icons:
  image_path: "assets/images/appicon.png";
  android:  true
  ios: true

Twittar

0 Compart.