Changer l’icône du lanceur (launcher) d’applications dans Flutter

Objectifs d’apprentissage :

Comprendre l’importance de personnaliser l’icône du lanceur dans une application Flutter.
Apprendre à remplacer l’icône par défaut par une icône personnalisée.
Explorer les différentes étapes pour modifier l’icône du lanceur à l’aide de Flutter.

Introduction

L’icône du lanceur est la première chose que les utilisateurs voient lorsqu’ils interagissent avec une application mobile. Il est crucial de personnaliser cette icône pour donner à votre application une identité visuelle distinctive et pour attirer l’attention des utilisateurs. Dans Flutter, la personnalisation de l’icône du lanceur est simple et peut être réalisée en quelques étapes.
Il y a deux façons de changer l’icône de l’application :

Changement manuel des fichiers d’icônes dans les dossiers Android et iOS :

Cette méthode nécessite de remplacer manuellement les fichiers d’icônes dans les dossiers de ressources Android (mipmap) et iOS (Assets.xcassets) avec les nouvelles icônes aux tailles appropriées. Vous devez fournir toutes les tailles d’icônes requises pour chaque densité d’écran Android et chaque appareil iOS.

Utilisation de Package qui ajoutera automatiquement toutes les tailles d’icônes dans les dossiers Android et iOS :

Cette méthode consiste à utiliser un package Flutter spécialement conçu pour gérer les icônes d’application (« flutter_lancher_icons »).
Ce package automatise le processus en générant et en ajoutant automatiquement toutes les tailles d’icônes nécessaires dans les dossiers Android et iOS.
Cela simplifie considérablement le processus de gestion des icônes et garantit que votre application dispose des icônes appropriées pour chaque plateforme sans avoir à les ajouter manuellement.

Étapes pour changer l’icône du lanceur dans Flutter:

Préparation de l’icône personnalisée:

Avant de commencer, préparez une icône au format PNG ou JPEG. Assurez-vous que l’icône a une résolution appropriée pour les différentes densités d’écran des appareils mobiles (mDPI, hDPI, xhDPI, xxhDPI, xxxhDPI).

Ajout de l’icône personnalisée au projet Flutter:

Placez votre icône personnalisée dans le dossier « a
ssets » de votre projet Flutter. Vous pouvez créer un sous-dossier tel que « icons » pour mieux organiser vos ressources.

Configuration du fichier pubspec.yaml:

Dans le fichier pubspec.yaml de votre projet Flutter, déclarez l’icône personnalisée sous la section « flutter » comme suit :
Utiliser la commande : flutter pub add flutter_launcher_icons

# The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.6 sqflite: ^2.3.3+1 path: ^1.9.0 uuid: ^4.4.0 flutter_launcher_icons: ^0.13.1

Ajouter une image:

vous devez télécharger une image/icône sur votre projet que vous souhaitez voir comme icône de lanceur. (J’ai créé un nom de dossier : « assets » dans la racine de mon projet projet et dans ce dossier j’ai crée un dossier « icones », puis j’ai téléchargé le apcpedagogie.png dans le dossier icones). Vous devez maintenant ajouter les codes ci-dessous et coller le chemin de votre image sur image_path : dans la page pubspec.yaml.

# The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.6 sqflite: ^2.3.3 path: ^1.9.0 flutter_launcher_icons: ^0.13.1 flutter_icons: image_path: "assets/icons/apcpedagogie.png" android: true ios: true

Rafraîchissement du projet Flutter:

Après avoir apporté ces modifications, assurez-vous de rafraîchir votre projet Flutter en exécutant la commande flutter pub get dans votre terminal pour que les changements prennent effet.

flutter pub get flutter pub run flutter_launcher_icons:main

Flutter

Changer l’icône du lanceur (launcher) d’applications dans Flutter