354 votes

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

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 .

0 votes

Vous pouvez mettre à jour l'appicon avec deux voies, j'ai mentionné la vérification des deux voies. ici

394voto

Mark O'Sullivan Points 1895

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.

3 votes

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

1 votes

Avez-vous une taille d'image recommandée pour le image_path image ?

0 votes

Je ne pourrais pas dire avec certitude lequel est le meilleur @Suragch. Dans mes tests, j'ai toujours utilisé 3 tailles différentes. Vous pouvez les trouver dans le répertoire de test de la page du projet GitHub : github.com/fluttercommunity/flutter_launcher_icons/tree/master/

278voto

Suragch Points 197

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.

enter image description here

_(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.

enter image description here

(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.

enter image description here

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.

1 votes

si vous avez eu du mal à le comprendre, je me ferai un plaisir de répondre à vos questions. Ouvrez un dossier et je vous répondrai à ce sujet : github.com/fluttercommunity/flutter_launcher_icons

3 votes

@MarkO'Sullivan, merci. Je pense que le paquet est bon. C'est juste que la documentation était difficile à suivre pour moi. Par exemple, quelle taille utiliser pour l'image initiale, les couches d'arrière-plan sont-elles créées pour Android, etc. Il serait vraiment utile d'avoir un tutoriel détaillé pour guider un débutant dans le processus.

0 votes

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

210voto

Rahul Mahadik Points 2605

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.

8 votes

Cela a fonctionné pour moi, mais seulement une fois que j'ai exécuté la dernière ligne. flutter pub pub run flutter_launcher_icons:main . Merci pour le conseil !

4 votes

J'obtiens des erreurs Android.dart:164:25 : Error : Trop d'arguments positionnels : 1 autorisé, mais 4 trouvés.

0 votes

Je peux changer d'icône si le mode sombre est activé ?

36voto

Collin Jackson Points 29995

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

2 votes

Votre lien ne produit que les tailles correctes pour les icônes Android

3voto

Rainer Wittmann Points 2276

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.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X