Come si imposta l’icona dell’app in Flutter

Ogni app ha una sua icona che la identifica e che si posiziona in una schermata del mobile automaticamente. Se non facciamo niente, Flutter usa la sua icona predefinita: la famosa F inclinata a sinistra di 45 gradi azzurrina… Bene, oggi la andiamo a modificare!

Installazione del package per l’icona

Per prima cosa eseguiamo nel terminale questo comando:

flutter pub add flutter_launcher_icons

in modo da installare l’ultima versione del pacchetto.

La sua funzione è automatizzare la generazione di tutte le varie dimensioni necessario ai sistemi per adattarsi ai vari schermi e risoluzioni. Infatti per iOS avremo retina 1, retina 2 e retina 3; le quali icone dovranno avere diverse dimensioni per adeguarsi ai vari modelli usciti nel tempo. E non sono pochi! Discorso analogo per Android. Quindi come si può intuire farlo a mano è un lavoro tedioso.

Questa automazione come si diceva, genera molte immagini a noi “invisibili”, cioè non ci dovremmo occupare quante sono , dove sono ecc, perché dandogli in pasto una sola immagine, il pacchetto fa tutto il resto da solo.

Modifica del file pubspec.yaml

In fondo al file pubspec.yaml,  sopra l’ultima sezione “flutter:”, aggiungiamo questo codice:

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/images/logo_app.webp"
  remove_alpha_ios: true
  min_sdk_android: 21
  platforms:
    android: true
    ios: true

Dove il nome dell’immagine deve rispecchiare quello che gli hai dato te.

Ricorda che la migliore dimensione di questa immagine di partenza è di 1024 x 1024 pixels. E’ anche possibile scegliere icone diverse per i diversi ambienti: sotto android specifichi un image_path e sotto ios: un altro image_path.

Esegui il comando specifico per la generazione del set di icone:

dart run flutter_launcher_icons

I comandi specifici di Flutter (e Dart) vanno eseguiti nella cartella root del progetto, se usi VS Code basterà aprire il terminale integrato e ti trovi già nella cartella giusta.

Le icone verranno creati in android/app/src/main/res/ e ios/Runner/Assets.xcassets/

Adesso puoi eseguire l’app sugli emulatori o sui dispositivi e vedrai le tue creazioni all’opera!