web-dev-qa-db-fra.com

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

Lorsque je crée une application avec la commande flutter create, le logo flottant est utilisé en tant qu'icône d'application pour les deux plates-formes.

Si je veux changer l'icône de l'application, dois-je accéder aux répertoires des deux plates-formes et y remplacer des images?, Par répertoires des plates-formes, je veux dire 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 en tant que Flutter Asset et les icônes sont générées d'une manière ou d'une autre?.

flutterapplication-icon
83
RobertoAllende

Flutter Launcher Icons a été conçu pour permettre de 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, spécifiez le chemin de l'icône que vous souhaitez utiliser pour l'application, puis choisissez si vous souhaitez utiliser l'icône pour l'application iOS, l'application Android ou les deux.
  • Exécuter le package
  • Voila! Les icônes de lanceur par défaut ont maintenant été remplacées par votre icône personnalisée

J'espère ajouter une vidéo au GitHub README pour le démontrer.

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

Si quelqu'un veut suggérer des améliorations/signaler des bogues, veuillez ajoutez-le en tant que problème dans le projet GitHub .

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

Mise à jour 2: À partir de la version 0.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: À partir de la v0.5.2 (20 juin 2018), vous pouvez désormais ajouter des icônes de lanceur adaptatif pour l'application Android de votre Projet Flutter

114
Mark O'Sullivan

Suivez les étapes simples:

  1. Ajouter flutter_launcher_icons Plugin à pubspec.yaml

par exemple.

dev_dependencies: 
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: "^0.6.1"

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

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

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

$ flutter pub get

$ flutter pub pub run flutter_launcher_icons:main

Pour vérifier toutes les options disponibles et définir différentes icônes pour Android et iOS, veuillez vous reporter à this

J'espère que cela aidera les autres.

48
Rahul Mahadik

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

J'avais quelques difficultés à utiliser et à comprendre le package flutter_launcher_icons . Cette réponse indique comment procéder si vous créez une application pour Android ou iOS de manière native. C'est assez rapide et facile une fois que vous l'avez fait plusieurs fois.

Android

Les icônes de lanceur Android ont à la fois un calque de premier plan et un calque d’arrière-plan.

enter image description here

(image adaptée de documentation Android )

Le moyen le plus simple de créer des icônes de lanceur pour Android consiste à utiliser Asset Studio, qui est disponible directement dans Android Studio (désolé les utilisateurs de VSCode). Vous n'avez même pas à quitter votre projet Flutter.

Cliquez avec le bouton droit sur le dossier Android dans l’esquisse de votre projet. Allez à Nouveau> Image Asset . Vous pouvez maintenant sélectionner une image pour créer votre icône de lanceur.

Remarque: J'utilise généralement une image 1024x1024 pixel mais vous ne devez certainement pas utiliser plus petit que 512x512. Si vous utilisez Gimp ou Inkscape, vous devez avoir deux calques, un pour le premier plan et un pour l’arrière-plan. L'image au premier plan doit comporter des zones transparentes permettant au calque d'arrière-plan de transparaître.

enter image description here

(clipart lion de ici )

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

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

Enfin, assurez-vous que le nom de l'icône du lanceur dans le Manifeste Android est identique à celui que vous avez appelé 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'avais toujours 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 Icon Set Creator . Vous lui donnez une image (d'au moins 1024x1024 pixels) et elle créera toutes les tailles dont vous avez besoin (plus le fichier Contents.json). Merci à cette réponse pour la suggestion.

les icônes iOS ne doivent avoir aucune transparence. Voir plus de directives ici .

Après avoir créé le jeu d'icônes, démarrez Xcode (en supposant que vous avez un Mac) et utilisez-le pour ouvrir le dossier ios de votre projet Flutter. Ensuite, accédez à Runner> Assets.xcassets et supprimez l'élément AppIcon.

enter image description here

Après cela, cliquez avec le bouton droit de la souris et choisissez Importer ... . 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, accédez à 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, [email protected] serait 29 fois 3, c'est-à-dire 87 pixels carrés. Vous devez conserver les mêmes noms d'icônes ou éditer le fichier JSON.

38
Suragch

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

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

18
Collin Jackson

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

3
Rainer Wittmann

Je vous suggère d'utiliser ce site lié ci-dessous

Créateur d'icône d'application

Étape 1: téléchargez l'image,

Étape 2: apportez les modifications nécessaires et cliquez sur le téléchargement (ne changez pas le nom du fichier)

Étape 3: extraire le fichier zip téléchargé dans le dossier correspondant

Android/app/main/src/res
2
Nitish Patel

Le meilleur moyen est de changer les icônes de lanceur séparément pour iOS et Android.

Modifiez les icônes dans iOS et le module Android séparément. Le plugin produit des icônes de tailles différentes à partir de la même icône qui sont déformées.

Suivez ce lien: https://flutter.dev/docs/deployment/Android

1
Raj Yadav