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


200

Lorsque je crée une application avec une flutter createcommande, le logo flottant est utilisé comme icône d'application pour les deux plates-formes.

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 de plates-formes que je veux dire myapp/ios/Runner/Assets.xcassets/AppIcon.appiconsetpour iOS et myapp/android/app/src/main/respour Android.

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


vous pouvez mettre à jour appicon avec deux voies, j'ai mentionné les deux vérifications ici
Mayur Dabhi

Réponses:


240

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

  • Ajoutez le package à 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écutez le package
  • Voila! Les icônes du lanceur par défaut ont maintenant été remplacées par votre icône personnalisée

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

Une vidéo montrant comment exécuter l'outil est disponible ici .

Si quelqu'un veut suggérer des améliorations / signaler des bogues, veuillez l' ajouter en tant que problème sur 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 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: à 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


1
Y a-t-il une exigence pour l'image?
camino

1
Je ne ai trouvé une référence à une taille, 710x599. Quelle était la raison de choisir cela? J'aurais attendu 512x512ou 1000x1000ou quelque chose de carré de toute façon.
Suragch

1
@Suragch vient de faire une recherche rapide d'une icône sur Google pour que je puisse la tester rapidement. J'ai inclus deux autres tailles d'icônes pour que les gens puissent essayer le package (1024x1024 et 128x128), vous pouvez les trouver ici: github.com/fluttercommunity/flutter_launcher_icons/tree/master
Mark O'Sullivan

3
Puis-je suggérer que les packages read.me fournissent des recommandations sur la taille des images.
Brett Sutton

1
C'est l'une des meilleures choses que j'aie jamais trouvées. Merci mec!
besil

135

Définition des icônes du lanceur comme un développeur natif

J'avais du mal à utiliser et à comprendre les icônes flutter_launcher_icons paquet . Cette réponse est comment vous le feriez si vous créiez 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 du lanceur Android ont à la fois un premier plan et un calque d'arrière-plan.

entrez la description de l'image ici

(image adaptée de la 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. 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 sur le androiddossier dans l'aperçu du projet. Accédez à Nouveau> Élément d'image . (Essayez de faire un clic droit sur le android/appdossier si vous ne voyez pas l' option Image Asset .) Vous pouvez maintenant sélectionner une image à partir de laquelle créer votre icône de lancement.

Remarque: j'utilise généralement une 1024x1024image en pixels, mais vous ne devriez certainement utiliser rien de plus petit 512x512. Si vous utilisez Gimp ou Inkscape, vous devriez avoir deux calques, un pour le premier plan et un pour l'arrière-plan. L'image de premier plan doit avoir des zones transparentes pour que le calque d'arrière-plan soit visible.

entrez la description de l'image ici

(clipart de lion d' ici )

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

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

Enfin, assurez-vous que le nom de l'icône du lanceur dans AndroidManifest est le même que celui que vous avez appelé ci-dessus ( ic_launcherpar 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 1024x1024pixels) et il crachera toutes les tailles dont vous avez besoin (plus le Contents.jsonfichier). 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 iosdossier dans votre projet Flutter. Ensuite, allez dans Runner> Assets.xcassets et supprimez l'élément AppIcon.

entrez la description de l'image ici

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

C'est tout. 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 de fichier. Par exemple, Icon-App-29x29@3x.pngserait des 29temps 3, c'est-à-dire des 87pixels carrés. Vous devez soit conserver les mêmes noms d'icônes, soit modifier le fichier JSON.


1
si vous avez du mal à le comprendre, je serai ravi de répondre à vos questions. Ouvrez un problème et je vous répondrai
Mark O'Sullivan

2
@ MarkO'Sullivan, merci. Je suppose que le package est bien. C'est juste que la documentation était difficile pour moi à suivre. Par exemple, quelle taille utiliser pour l'image initiale, les calques d'arrière-plan sont créés pour Android, etc. Il serait vraiment utile d'avoir un didacticiel détaillé pour guider un débutant tout au long du processus.
Suragch le

Bonne alternative au package, qui n'est pas officiel, ne semble plus fonctionner, et n'a pas été mis à jour depuis 6 mois ...
Yann39

1
Cela a aidé. Dans Android Studio, il n'y a pas d'option pour ajouter un élément d'image . Le travail autour que j'ai appris d'un problème github / flutter consiste à ouvrir le dossier / android (dans le projet flutter) en tant que projet "Android" standard dans Android Studio. L'option apparaîtra lorsque vous cliquez avec le bouton droit sur le dossier / res.
MwamiTovi le

2
@MwamiTovi a raison, mais vous devez attendre la synchronisation des gradins avant de cliquer avec le bouton droit de la souris ou même de synchroniser manuellement, sinon "nouveau -> élément d'image" ne s'affichera pas.
Daniel le

111

Suivez des étapes simples:

  1. Ajouter un flutter_launcher_iconsplug-in àpubspec.yaml

par exemple

dev_dependencies: 
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.7.5

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 run flutter_launcher_icons:main

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

J'espère que cela aidera les autres.


4
Cela a fonctionné pour moi; une seule fois, j'ai exécuté cette dernière ligne flutter pub pub run flutter_launcher_icons:main. Merci pour le conseil!
olisteadman

3
J'obtiens des erreurs android.dart: 164: 25: Erreur: Trop d'arguments de position: 1 autorisé, mais 4 trouvés.
ir2pid

Puis-je changer d'icône si le mode sombre est activé?
Maximiliano Sosa le

1
@ ir2pid pour résoudre l'erreur, vous devez mettre à jour la version en tant que flutter_launcher_icons: 0.7.5
Gökçer Gökdal

Juste une question curieuse: pourquoi pub pubau lieu de pub?
ch271828n Il y a


19

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

Créateur d'icônes d'application

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

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

Étape 3: Extraire le fichier Zip téléchargé dans le dossier respectif

android/app/src/main/res

3
cette suggestion n'aidera pas dans IOS
évalue

2
cette solution a fonctionné pour moi (ciblant Android uniquement)
dark_ruby

1
Une très belle solution.
Mayank M.

17

Je l'ai changé dans les étapes suivantes:

1) veuillez ajouter cette dépendance sur votre page pubspec.yaml

 dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.7.4

2) vous devez télécharger une image / icône sur votre projet que vous souhaitez voir comme une icône de lanceur. (j'ai créé un nom de dossier: image dans mon projet puis télécharger le logo.png dans le dossier image). Vous devez maintenant ajouter les codes ci-dessous et coller le chemin de votre image sur image_path: dans la page pubspec.yaml.

flutter_icons:
  image_path: "images/logo.png"
  android: true
  ios: true

3) Accédez au terminal et exécutez cette commande:

flutter pub get

4) Après avoir exécuté la commande, entrez la commande ci-dessous:

flutter pub run flutter_launcher_icons:main

5) Terminé

NB: (bien sûr, ajoutez une dépendance mise à jour de

https://pub.dev/packages/flutter_launcher_icons#-installing-tab-

)


4

Le meilleur et recommandé façon de définir App icône dans Flutter.

J'ai trouvé un plugin pour définir l'icône de l'application dans le flutter nommé "flutter_launcher_icons". Nous utiliserons ce plugin pour définir l'icône de l'application en flutter.

  1. Ajoutez ce plugin dans le fichier pubspec.yaml dans le répertoire racine du projet. Veuillez vérifier le code ci-dessous,

    dépendances:
    flutter:
    sdk: flutter
    cupertino_icons: ^ 0.1.2
    flutter_launcher_icons: ^ 0.7.2 + 1

Enregistrez le fichier et exécutez flutter pub get sur le terminal.

  1. Créez un dossier d'actifs à la racine du projet dans les actifs de dossier, créez également une icône de dossier et placez l'icône de votre application dans ce dossier. Je recommanderai à l'utilisateur la taille de l'icône de l'application 1024x1024. J'ai placé l'icône de l'application dans le dossier d'icônes et maintenant j'ai le chemin de l'icône de l'application en tant que assets / icon / icon.png

  2. Maintenant, dans pubspec.yaml, ajoutez le code ci-dessous,

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

  3. Enregistrez le fichier et exécutez flutter pub get sur le terminal. Après avoir exécuté la commande, exécutez la deuxième commande comme ci-dessous

    flutter pub run flutter_launcher_icons: main -f pubspec.yaml

Ensuite, exécutez l'application


Bien que vous ayez répondu à la même vieille bonne réponse, au moins vous en avez souligné les principaux points.
Felipe Augusto

0

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

Modifiez les icônes dans les modules iOS et 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


-5

vous pouvez y parvenir en utilisant flutter_launcher_icons dans pubspec.yaml

une autre façon est d'en utiliser un pour Android et un autre pour iOS

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.