webentwicklung-frage-antwort-db.com.de

Wie ändere ich das Anwendungsstartsymbol bei Flutter?

Wenn ich eine App mit dem Befehl flutter create Erstelle, wird das Flatter-Logo als Anwendungssymbol für beide Plattformen verwendet.

Wenn ich das App-Symbol ändern möchte, gehe ich zu beiden Plattformverzeichnissen und ersetze dort Bilder. Mit Plattformverzeichnissen meine ich myapp/ios/Runner/Assets.xcassets/AppIcon.appiconset Für iOS und myapp/Android/app/src/main/res Für Android.

Oder ist es möglich ein Bild als Flutter Asset zu definieren und die Icons werden irgendwie erzeugt?.

83
RobertoAllende

Flutter Launcher Icons wurde entwickelt, um das schnelle Generieren von Launcher Icons für Android und iOS zu erleichtern: https://pub.dartlang.org/packages/flutter_launcher_icons

  • Fügen Sie das Paket zu Ihrer Datei pubspec.yaml (in Ihrem Flutter-Projekt) 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 App Android oder beide verwenden möchten.
  • Führen Sie das Paket aus
  • Voila! Die Standard-Startsymbole wurden jetzt durch Ihr benutzerdefiniertes Symbol ersetzt

Ich hoffe, dass ich ein Video zum GitHub README hinzufügen kann, um es zu demonstrieren

Ein Video, das zeigt, wie das Tool ausgeführt wird, finden Sie hier .

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

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

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

Update 3: Ab v0.5.2 (20. Juni 2018) können Sie jetzt adaptive Launcher-Symbole für die Android App Ihres Computers hinzufügen Flattern Projekt

114
Mark O'Sullivan

Befolgen Sie einfache Schritte:

  1. Hinzufügen flutter_launcher_icons Plugin zu pubspec.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 auf dem Terminal den folgenden Befehl 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 zu setzen, lesen Sie bitte this

Hoffe, dass dies anderen hilft.

48
Rahul Mahadik

Festlegen der Launcher-Symbole wie bei einem nativen Entwickler

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

Android

Android-Starter-Symbole haben sowohl eine Vordergrund- als auch eine Hintergrundebene.

enter image description here

(Bild angepasst von Android-Dokumentation )

Die einfachste Möglichkeit, Startsymbole für Android zu erstellen, besteht darin, das Asset Studio zu verwenden, das direkt in Android= Studio verfügbar ist (sorry VSCode-Benutzer) müssen sogar Ihr Flutter-Projekt verlassen.

Klicken Sie mit der rechten Maustaste auf den Ordner Android in Ihrer Projektskizze. Gehen Sie zu Neu> Bildelement . Jetzt können Sie ein Bild auswählen, aus dem Sie Ihr Startsymbol erstellen möchten.

Hinweis: Ich verwende normalerweise ein 1024x1024 Pixelbild, aber Sie sollten auf jeden Fall nichts verwenden, das kleiner ist als 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.

enter image description here

(Löwe Clipart von hier )

Dadurch werden die aktuellen Launcher-Symbole ersetzt. Sie finden die generierten Symbole in den Ordnern mipmap:

Wenn Sie die Startsymbole lieber manuell erstellen möchten, finden Sie unter diese Antwort Hilfe.

Stellen Sie schließlich sicher, dass der Name des Launcher-Symbols im AndroidManifest mit dem oben genannten übereinstimmt (ic_launcher standardmäß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 von Hand individuell angepasst. Wenn Sie jedoch einen Mac haben, gibt es im Mac App Store eine kostenlose App mit dem Namen Icon Set Creator . Du gibst ihm ein Bild (von mindestens 1024x1024 Pixel) und es werden alle Größen ausgespuckt, die Sie benötigen (plus die Contents.json Datei). Vielen Dank an diese Antwort für den Vorschlag.

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

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

enter image description here

Klicken Sie danach mit der rechten Maustaste und wählen Sie Importieren ... . Wählen Sie das soeben erstellte Icon-Set.

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 dennoch 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. Beispielsweise, [email protected] wäre 29 mal 3, das ist, 87 Pixel im Quadrat. Sie müssen entweder dieselben Symbolnamen beibehalten oder die JSON-Datei bearbeiten.

38
Suragch

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

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

18
Collin Jackson

Ich habe das Symbol in den von Ihnen genannten Verzeichnissen immer geändert. Mir ist kein Mechanismus bekannt, mit dem das Flattern Symbole für Sie generiert.

3
Rainer Wittmann

Ich würde vorschlagen, dass Sie diese Webseite benutzen, die unten verlinkt ist

App Icon Creator

Schritt-1: Lade das Bild hoch,

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

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

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

Der beste Weg ist, die Startsymbole für iOS und Android getrennt zu ändern.

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

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

1
Raj Yadav