Comment changer l'icône du lanceur d'applications sur Flutter ?

Question

Lorsque je crée une application avec un flutter create le logo flutter est utilisé comme icône d'application pour les deux plateformes.

Si je veux changer l'icône de l'application, dois-je aller dans les répertoires des deux plates-formes et y remplacer les images ? par répertoires des plates-formes, j'entends myapp/ios/Runner/Assets.xcassets/AppIcon.appiconset pour iOS et myapp/android/app/src/main/res pour Android.

Ou est-il possible de définir une image comme une Flutter Asset et les icônes sont générées d'une manière ou d'une autre .

Answer 1

Flutter Launcher Icons a été conçu pour aider à générer rapidement des icônes de lanceur pour Android et iOS : https://pub.dartlang.org/packages/flutter_launcher_icons

• Ajoutez le paquet à votre fichier pubspec.yaml (dans votre projet Flutter) pour l'utiliser.
• Dans le fichier pubspec.yaml, indiquez le chemin d'accès de l'icône que vous souhaitez utiliser pour l'application, puis choisissez si vous voulez utiliser l'icône pour l'application iOS, l'application Android ou les deux.
• Exécuter le paquet
• Voilà ! Les icônes par défaut du lanceur ont maintenant été remplacées par votre icône personnalisée.

J'espère ajouter une vidéo au README de GitHub pour en faire la démonstration.

Une vidéo montrant comment utiliser l'outil peut être trouvée ici .

Si quelqu'un veut suggérer des améliorations / signaler des bogues, veuillez l'ajouter comme problème sur le projet GitHub. .

Mise à jour : À partir du mercredi 24 janvier 2018, vous devriez être en mesure de créer de nouvelles icônes sans remplacer les anciennes icônes de lanceur existantes dans votre projet Flutter.

Mise à jour 2 : Depuis la v0.4.0 (8 juin 2018), vous pouvez spécifier une image pour votre icône Android et une image distincte pour votre icône iOS.

Mise à jour 3 : Depuis la v0.5.2 (20 juin 2018), vous pouvez désormais ajouter des icônes de lanceur adaptatives pour l'application Android de votre projet Flutter.

Answer 2

Configurer les icônes du lanceur comme un développeur natif

J'avais des difficultés à utiliser et à comprendre le icônes du lanceur de flotteurs paquet. Cette réponse est la manière dont vous procéderiez si vous créiez une application pour Android ou iOS en mode natif. C'est assez rapide et facile une fois que vous l'avez fait plusieurs fois.

Android

Les icônes des lanceurs Android ont une couche de premier plan et une couche d'arrière-plan.

_(image adaptée de Documentation Android )_

La façon la plus simple de créer des icônes de lanceur pour Android est d'utiliser l'Asset Studio qui est disponible directement dans Android Studio. Vous n'avez même pas besoin de quitter votre projet Flutter. (Utilisateurs de VS Code, vous pouvez envisager d'utiliser Android Studio uniquement pour cette étape. C'est vraiment très pratique et cela ne fait pas de mal de se familiariser avec un autre IDE).

Cliquez avec le bouton droit de la souris sur le android dans le plan du projet. Allez à Nouveau > Image Asset . (Essayez de faire un clic droit sur le android/app si vous ne voyez pas Image Asset en option. Consultez également les commentaires ci-dessous pour d'autres suggestions). Vous pouvez maintenant sélectionner une image pour créer l'icône de votre lanceur.

Note : J'utilise généralement un 1024x1024 pixel, mais vous devriez certainement n'utilisez rien de plus petit que 512x512 . Si vous utilisez Gimp ou Inkscape, vous devriez deux couches, une pour le premier plan et une pour l'arrière-plan. arrière-plan. L'image de premier plan doit comporter des zones transparentes pour que le transparentes pour laisser apparaître le calque d'arrière-plan.

(clipart lion de ici )

Cela remplacera les icônes actuelles du lanceur. Vous pouvez trouver les icônes générées dans le fichier mipmap les dossiers :

Si vous préférez créer les icônes du lanceur manuellement, voir cette réponse pour de l'aide.

Enfin, assurez-vous que le nom de l'icône du lanceur dans l'AndroidManifest est le même que celui que vous lui avez donné ci-dessus ( ic_launcher par défaut) :

application android:icon="@mipmap/ic_launcher"

Exécutez l'application dans l'émulateur pour confirmer que l'icône du lanceur a été créée avec succès.

iOS

J'ai toujours eu l'habitude de redimensionner individuellement mes icônes iOS à la main, mais si vous avez un Mac, il existe une application gratuite dans le Mac App Store appelée Créateur de jeux d'icônes . Vous lui donnez une image (d'au moins 1024x1024 pixels) et il vous sortira toutes les tailles dont vous avez besoin (plus les Contents.json ). Merci à cette réponse pour la suggestion.

Les icônes iOS ne doivent pas avoir de transparence. Voir d'autres directives ici .

Après avoir créé le jeu d'icônes, lancez Xcode (en supposant que vous ayez un Mac) et utilisez-le pour ouvrir le fichier ios dans votre projet Flutter. Allez ensuite dans Runner > Assets.xcassets et supprimez l'élément AppIcon.

Après cela, faites un clic droit et choisissez Importation... . Choisissez le jeu d'icônes que vous venez de créer.

C'est ça. Confirmez que l'icône a été créée en exécutant l'application dans le simulateur.

Si vous n'avez pas de Mac...

Vous pouvez toujours créer toutes les images à la main. Dans votre projet Flutter, allez à ios/Runner/Assets.xcassets/AppIcon.appiconset .

Les tailles d'image dont vous avez besoin sont les tailles multipliées dans le nom du fichier. Par exemple, Icon-App-29x29@3x.png serait 29 temps 3 c'est-à-dire, 87 pixels carrés. Vous devez soit conserver les mêmes noms d'icônes, soit modifier le fichier JSON.

Answer 3

Suivez des étapes simples :

1. Ajouter flutter_launcher_icons Plugin pour pubspec.yaml

par exemple

dev_dependencies: 
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: "^0.9.0"

flutter_icons:
  image_path: "icon/icon.png" 
  android: true
  ios: true

2. Prépare une icône d'application pour le chemin spécifié. e.g. icon/icon.png

3. Exécutez la commande sur le terminal pour créer des icônes d'application :

$ flutter pub get

$ flutter pub run flutter_launcher_icons:main

Pour vérifier toutes les options disponibles et pour définir des icônes différentes pour Android et iOS, veuillez vous référer à ce

Mise à jour :

flutter_launcher_icons 0.8.0 La version (12 septembre 2020) a Ajout d'un support pour les saveurs

Les saveurs sont généralement utilisées pour construire votre application pour différents environnements tels que dev et prod

La communauté a rédigé quelques articles et paquets que vous pourriez trouver utiles. Ces articles des saveurs d'adresses pour iOS et Android.

J'espère que cela aidera d'autres personnes.

Answer 4

Vous devez remplacer les fichiers d'icônes de Flutter par vos propres images. Ce site vous aidera à transformer vos png en icônes de lanceur de différentes tailles :

https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html

Answer 5

J'ai toujours changé l'icône dans les répertoires que vous avez mentionnés. Je ne connais pas de mécanisme permettant à Flutter de générer des icônes pour vous.