Wie ändere ich das Application Launcher-Symbol auf Flutter?

193

Wenn ich eine App mit flutter createBefehl erstelle , wird das Flatterlogo als Anwendungssymbol für beide Plattformen verwendet.

Wenn ich das App-Symbol ändern möchte, gehe ich zu beiden Plattformverzeichnissen und ersetze dort Bilder? Durch Plattformverzeichnisse, die ich myapp/ios/Runner/Assets.xcassets/AppIcon.appiconsetfür iOS und myapp/android/app/src/main/resAndroid meine .

Oder ist es möglich, ein Bild als Flutter Asset zu definieren und die Symbole werden irgendwie generiert?

RobertoAllende
quelle
Sie können Appicon auf zwei Arten aktualisieren, ich habe erwähnt, dass beide Wege hier
Mayur Dabhi

Antworten:

232

Flutter Launcher Icons wurde entwickelt, um schnell Launcher-Symbole für Android und iOS zu generieren: https://pub.dartlang.org/packages/flutter_launcher_icons

  • Fügen Sie das Paket Ihrer pubspec.yaml-Datei (innerhalb Ihres Flutter-Projekts) hinzu, um es zu verwenden
  • Geben Sie in der Datei pubspec.yaml den Pfad des Symbols an, das Sie für die App verwenden möchten, und wählen Sie dann aus, ob Sie das Symbol für die iOS-App, die Android-App oder beides verwenden möchten.
  • Führen Sie das Paket aus
  • Voila! Die Standard-Startsymbole wurden jetzt durch Ihr benutzerdefiniertes Symbol ersetzt

Ich hoffe, der GitHub README ein Video hinzufügen zu können, um es zu demonstrieren

Ein Video zur Ausführung des Tools finden Sie hier .

Wenn jemand Verbesserungen vorschlagen / Fehler melden möchte, fügen Sie diese bitte als Problem im GitHub-Projekt hinzu .

Update: Ab Mittwoch, dem 24. Januar 2018 sollten Sie in der Lage sein, neue Symbole zu erstellen, ohne die alten vorhandenen Startsymbole in Ihrem Flutter-Projekt zu überschreiben.

Update 2: Ab Version 0.4.0 (8. Juni 2018) können Sie ein Bild für Ihr Android-Symbol und ein separates Bild für Ihr iOS-Symbol angeben.

Update 3: Ab Version 0.5.2 (20. Juni 2018) können Sie jetzt adaptive Startsymbole für die Android-App Ihres Flutter-Projekts hinzufügen

Mark O'Sullivan
quelle
1
Gibt es eine Anforderung für das Bild?
Camino
1
Ich habe nur einen Hinweis auf eine Größe gefunden 710x599. Was war der Grund dafür? Ich hätte erwartet512x512 oder 1000x1000sowieso etwas Quadratisches.
Suragch
1
@Suragch hat gerade eine schnelle Suche nach einem Symbol bei Google durchgeführt, damit ich es schnell testen kann. Ich habe zwei weitere Symbolgrößen hinzugefügt, damit die Benutzer das Paket ausprobieren können (1024 x 1024 und 128 x 128). Diese finden Sie hier: github.com/fluttercommunity/flutter_launcher_icons/tree/master/…
Mark O'Sullivan
2
Kann ich vorschlagen, dass die Pakete read.me Empfehlungen zur Bildgröße enthalten?
Brett Sutton
1
Dies ist eines der besten Dinge, die ich je gefunden habe. Danke mann!
besil
132

Festlegen der Startsymbole wie bei einem nativen Entwickler

Ich hatte einige Probleme beim Verwenden und Verstehen des Pakets flutter_launcher_icons . Mit dieser Antwort würden Sie es tun, wenn Sie eine App für Android oder iOS nativ erstellen würden. Es ist ziemlich schnell und einfach, wenn Sie es ein paar Mal gemacht haben.

Android

Android-Startsymbole haben sowohl eine Vordergrund- als auch eine Hintergrundebene.

Geben Sie hier die Bildbeschreibung ein

(Bild aus der Android-Dokumentation angepasst )

Der einfachste Weg, Startsymbole für Android zu erstellen, ist die Verwendung von Asset Studio, das direkt in Android Studio verfügbar ist. Sie müssen Ihr Flutter-Projekt nicht einmal verlassen. (VS-Code-Benutzer können Android Studio nur für diesen Schritt in Betracht ziehen. Es ist wirklich sehr praktisch und es tut nicht weh, mit einer anderen IDE vertraut zu sein.)

Klicken Sie mit der rechten Maustaste auf den androidOrdner in der Projektskizze. Gehen Sie zu Neu> Image Asset . (Klicken Sie mit der rechten Maustaste auf den android/appOrdner, wenn Sie Image Asset nicht sehen als Option angezeigt wird.) Jetzt können Sie ein Bild auswählen, aus dem Sie Ihr Startsymbol erstellen möchten.

Hinweis: Normalerweise verwende ich ein 1024x1024Pixelbild, aber Sie sollten auf keinen Fall etwas kleineres verwenden 512x512. Wenn Sie Gimp oder Inkscape verwenden, sollten Sie zwei Ebenen haben, eine für den Vordergrund und eine für den Hintergrund. Das Vordergrundbild sollte transparente Bereiche haben, durch die die Hintergrundebene hindurchscheinen kann.

Geben Sie hier die Bildbeschreibung ein

(Löwe Clipart von hier )

Dadurch werden die aktuellen Startsymbole ersetzt. Sie finden die generierten Symbole in den mipmapOrdnern:

Wenn Sie die Startsymbole lieber manuell erstellen möchten, lesen Sie dieser Antwort Hilfe.

Stellen Sie schließlich sicher, dass der Name des Startsymbols im AndroidManifest mit dem oben genannten übereinstimmt ( ic_launcherstandardmäßig):

application android:icon="@mipmap/ic_launcher"

Führen Sie die App im Emulator aus, um zu bestätigen, dass das Startsymbol erfolgreich erstellt wurde.

iOS

Früher habe ich die Größe meiner iOS-Symbole immer manuell geändert. Wenn Sie jedoch einen Mac haben, gibt es im Mac App Store eine kostenlose App namens Icon Set Creator . Sie geben ihm ein Bild (mit mindestens 1024x1024Pixeln) und es spuckt alle benötigten Größen (plus die Contents.jsonDatei) aus. Vielen Dank an diese Antwort für den Vorschlag.

iOS-Symbole sollten keine Transparenz haben. Weitere Richtlinien finden Sie hier .

Nachdem Sie den Symbolsatz erstellt haben, starten Sie Xcode (vorausgesetzt, Sie haben einen Mac) und öffnen damit den iosOrdner in Ihrem Flutter-Projekt. Gehen Sie dann zu Runner> Assets.xcassets und löschen Sie das AppIcon-Element.

Geben Sie hier die Bildbeschreibung ein

Klicken Sie danach mit der rechten Maustaste und wählen Sie Importieren ... . Wählen Sie den gerade erstellten Symbolsatz.

Das ist es. Bestätigen Sie, dass das Symbol erstellt wurde, indem Sie die App im Simulator ausführen.

Wenn Sie keinen Mac haben ...

Sie können weiterhin alle Bilder von Hand erstellen. Gehen Sie in Ihrem Flutter-Projekt zu ios/Runner/Assets.xcassets/AppIcon.appiconset.

Die Bildgrößen, die Sie benötigen, sind die multiplizierten Größen im Dateinamen. Zum Beispiel [email protected]wären 29Zeiten 3, 87dh Pixel quadratisch. Sie müssen entweder dieselben Symbolnamen beibehalten oder die JSON-Datei bearbeiten.

Suragch
quelle
1
Wenn Sie Schwierigkeiten hatten, es zu verstehen, beantworte ich gerne Ihre Fragen. Öffnen Sie eine Ausgabe und ich werde mich bei Ihnen melden
Mark O'Sullivan
2
@ MarkO'Sullivan, danke. Ich vermute, dass das Paket in Ordnung ist. Es ist nur so, dass es für mich schwierig war, der Dokumentation zu folgen. Welche Größe für das ursprüngliche Bild verwendet werden soll, sind beispielsweise die Hintergrundebenen, die für Android erstellt werden usw. Es wäre sehr hilfreich, ein detailliertes Tutorial zu haben, um einen Anfänger durch den Prozess zu führen.
Suragch
Gute Alternative zu dem Paket, das nicht offiziell ist, scheint nicht mehr zu funktionieren und wurde seit 6 Monaten nicht aktualisiert ...
Yann39
1
Das hat geholfen. In Android Studio gibt es keine Option zum Hinzufügen von Image Asset . Die Arbeit, die ich aus einem Github / Flutter-Problem gelernt habe, besteht darin, den Ordner / android (innerhalb des Flutter-Projekts) als Standard-Android-Projekt in Android Studio zu öffnen. Die Option wird angezeigt, wenn Sie mit der rechten Maustaste auf den Ordner / res klicken.
MwamiTovi
2
@MwamiTovi ist richtig, Sie müssen jedoch auf die Gradle-Synchronisierung warten, bevor Sie mit der rechten Maustaste klicken oder sogar manuell synchronisieren. Andernfalls wird "Neu -> Bild-Asset" nicht angezeigt.
Daniel
108

Befolgen Sie einfache Schritte:

  1. In flutter_launcher_iconsPluginpubspec.yaml

z.B

dev_dependencies: 
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: "^0.6.1"

flutter_icons:
  image_path: "icon/icon.png" 
  android: true
  ios: true
  1. Bereiten Sie ein App-Symbol für den angegebenen Pfad vor. e.g. icon/icon.png

  2. Führen Sie den Befehl auf dem Terminal aus, um App-Symbole zu erstellen:

$ flutter pub get

$ flutter pub pub run flutter_launcher_icons:main

Um alle verfügbaren Optionen zu überprüfen und verschiedene Symbole für Android und iOS festzulegen, lesen Sie bitte diese Informationen

Hoffe das wird anderen helfen.

Rahul Mahadik
quelle
4
Das hat bei mir funktioniert; nur einmal würde ich diese letzte Zeile laufen lassen flutter pub pub run flutter_launcher_icons:main. Danke für den Tipp!
Olisteadman
3
Ich erhalte Fehler android.dart: 164: 25: Fehler: Zu viele Positionsargumente: 1 erlaubt, aber 4 gefunden.
ir2pid
Ich kann das Symbol wechseln, wenn der Dunkelmodus aktiviert ist.
Maximiliano Sosa
29

Sie müssen die Flutter-Symboldateien durch eigene Bilder ersetzen. Diese Seite hilft Ihnen dabei, Ihr PNG in Launcher-Symbole in verschiedenen Größen zu verwandeln:

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

Collin Jackson
quelle
2
Ihr Link produziert nur die richtigen Größen für Android-Symbole
Mark O'Sullivan
17

Ich habe es in den folgenden Schritten geändert:

1) Bitte fügen Sie diese Abhängigkeit auf Ihrer pubspec.yaml-Seite hinzu

 dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.7.4

2) Sie müssen ein Bild / Symbol in Ihr Projekt hochladen, das Sie als Startsymbol sehen möchten. (Ich habe einen Ordnernamen erstellt: Bild in meinem Projekt, dann lade die logo.png in den Bildordner hoch). Jetzt müssen Sie die folgenden Codes hinzufügen und Ihren Bildpfad in image_path einfügen: auf der Seite pubspec.yaml.

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

3) Gehen Sie zum Terminal und führen Sie diesen Befehl aus:

flutter pub get

4) Geben Sie nach Ausführung des Befehls den folgenden Befehl ein:

flutter pub run flutter_launcher_icons:main

5) Fertig

NB: (natürlich eine aktualisierte Abhängigkeit von hinzufügen

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

)

Paul Polash
quelle
17

Ich würde Ihnen empfehlen, diese unten verlinkte Website zu nutzen

App Icon Creator

Schritt 1: Laden Sie das Bild hoch,

Schritt 2: Nehmen Sie die erforderlichen Änderungen vor und klicken Sie auf Download (ändern Sie den Dateinamen nicht).

Schritt 3: Extrahieren Sie die heruntergeladene Zip-Datei in den entsprechenden Ordner

android/app/src/main/res
Nitish Patel
quelle
3
Dieser Vorschlag wird in IOS
Evals
2
Diese Lösung funktionierte für mich (nur für Android)
dark_ruby
1
Eine sehr schöne Lösung.
Mayank M.
4

Beste und empfohlene Methode zum Festlegen des App-Symbols in Flutter.

Ich habe ein Plugin gefunden, mit dem das App-Symbol in flutter gesetzt werden kann: "flutter_launcher_icons". Wir werden dieses Plugin verwenden, um das App-Symbol in Flattern zu versetzen.

  1. Fügen Sie dieses Plugin in der Datei pubspec.yaml im Projektstammverzeichnis hinzu. Bitte überprüfen Sie unten Code,

    Abhängigkeiten:
    flattern:
    sdk: flattern
    cupertino_icons: ^ 0.1.2
    flutter_launcher_icons: ^ 0.7.2 + 1

Speichern Sie die Datei und führen Sie Flutter Pub Get auf Terminal.

  1. Erstellen Sie ein Ordner-Asset im Stammverzeichnis des Projekts in Ordner-Assets. Erstellen Sie auch ein Ordnersymbol und platzieren Sie Ihr App-Symbol in diesem Ordner. Ich werde dem Benutzer 1024x1024 App-Symbolgröße empfehlen. Ich habe das App-Symbol im Symbolordner abgelegt und jetzt habe ich den Pfad für das App-Symbol als Assets / icon / icon.png

  2. Fügen Sie nun in pubspec.yaml den folgenden Code hinzu:

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

  3. Speichern Sie die Datei und führen Sie Flutter Pub Get auf Terminal. Führen Sie nach dem Ausführen des Befehls den zweiten Befehl wie folgt aus

    flutter pub run flutter_launcher_icons: main -f pubspec.yaml

Führen Sie dann App aus

Parth Patel
quelle
Obwohl Sie dieselbe alte richtige Antwort beantwortet haben, haben Sie zumindest die Hauptpunkte hervorgehoben.
Felipe Augusto
0

Am besten ändern Sie die Startsymbole für iOS und Android separat.

Ändern Sie die Symbole im iOS- und Android-Modul separat. Das Plugin erzeugt Symbole unterschiedlicher Größe aus demselben Symbol, die verzerrt sind.

Folgen Sie diesem Link: https://flutter.dev/docs/deployment/android

Raj Yadav
quelle
-4

Sie können dies erreichen, indem Sie flutter_launcher_icons in pubspec.yaml verwenden

Eine andere Möglichkeit ist, eine für Android und eine andere für iOS zu verwenden

Malik A. Abualzait
quelle