🌅Splash e Icon

Esta seção vai explicar o uso e geração de uma splash screen nativa e do ícone do aplicativo, ambos para Android e iOS, de maneira simples e fácil.

Para isso, é feito uso de dois plugins: FlutterNativeSplash e FlutterIcons

O que é uma Splash Screen Nativa? É a imagem inicial que vai aparecer para o usuário quando abrir o aplicativo, antes mesmo de rodar a main do nosso app. É importante o seu uso, para que o usuário não receba uma tela branca sem nada até o app carregar suas primeiras telas.

Splash

Para utilizar esta Splash, devemos iniciar adicionado a sua declaração no pubspec.yaml, abaixo da seção dev_dependencies, da maneira abaixo. A cor pode ser passado qualquer valor, para a cor de fundo, ou o uso de uma imagem de formato que faça sentido para um celular. É possível fazer o uso para android e iOS, ou escolher o uso para apenas um deles.

flutter_native_splash: 
  color: "#5b29c5"
  image: "assets/images/splash.png"
  android: true
  ios: true
  android_gravity: fill
  ios_content_mode: scaleAspectFill

Após isso, devemos adicionar o seguinte código na main do nosso projeto, para que esta splash nativa seja mantida durante a abertura da aplicação:

void main() async {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

Com isso, a nossa splash vai ser mantida até que seja feito a chamada de uma função para que ela seja removida. Podemos usar uma lógica de remover ela, apenas após as nossas verificações necessárias, como por exemplo checar se o usuário está autenticado ou não. Para fazer essa remoção, é apenas necessário chamar a seguinte função:

FlutterNativeSplash.remove();

Por fim, para que a Splash seja de fato adicionada a nossa aplicação, precisamos rodar o seguinte comando no terminal:

// flutter pub run flutter_native_splash:create

Icon

Para adicionar um ícone ao nosso aplicativo, é apenas necessário fazer a declaração do plugin no pubspec.yaml, e passar qual a imagem que desejamos:

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/images/icon_app.png"
  remove_alpha_ios: true

É importante que o ícone tenha as dimensões 512x512 ou 1024x1024, para uma melhor experiência.

E para que seja de fato adicionado, apenas é necessário rodar o seguinte comando no terminal:

// flutter pub run flutter_launcher_icons:main