Ein eigenes App Icon in die eigene Flutter App einzubauen ist nicht schwer. Es gibt genügend Packages, die dich bei den App Icons unterstützen. Welche du wählen solltest und was genau du dabei beachten solltest, zeige ich dir jetzt. Hier also die Tipps und Tricks wie du dein eigenes App Icon in die Flutter App einbaust.
Das richtige Bildformat für ein App Icon in Flutter
Achte darauf, dass dein App Icon eine png ist, svg akzeptiert Flutter nicht.
Eine Mindesgröße von 1024px x 1024px sollte eingehalten werden.
Eckige Kanten: Bei iOS führen runde Ecken zu einem Fehler. Deswegen achte darauf, dass die png-Datei bildfüllend ist, also eckige Kanten hat. Die Geräte werden diese bei Bedarf sowieso abrunden
Android: Für manche Android Geräte gelten besondere Dateiformat-Regeln. Dazu gleich mehr.
Dart Package: flutter_launcher_icons
Der einfachste Weg die Icons im richtigen Format zu integrieren, ist mit dem Dart Package Flutter Launcher Icons. Um das Package zu verwenden, trage dieses einfach in deiner pubspec.yaml unter dev_dependencies ein. So sollte es aussehen:
dev_dependencies:
flutter_launcher_icons: "^0.9.2"
flutter_test:
sdk: flutter
flutter_lints: ^1.0.0
Führe nun flutter pub get aus, um das Package herunterzuladen. Wenn das erledigt ist, lege dein Bild ab und füge den Pfad hinzu.
dev_dependencies:
flutter_launcher_icons: "^0.9.2"
flutter_test:
sdk: flutter
flutter_lints: ^1.0.0
flutter_icons:
android: true
ios: true
image_path: "assets/icon.png"
App Icons generieren
Wenn du jetzt den Befehl flutter pub run flutter_launcher_icons:main ausführst, bekommst du für dein iOS Gerät ein wunderschönes App Icon. Auf Android und iOS sieht das Ganze dann so aus:
Android
iOS
iOS hat sehr gut geklappt, aber bei Android merkt man, dass es auch hübscher gehen kann. Es soll ja bildfüllend sein. Deswegen müssen wir uns die `attributes` noch einmal anschauen, die wir mitgeben.
Zusätzliche Attribute für Android
Android möchte gerne ein Hintergrundbild von dir, das es selbst zurechtscheneiden kann. Und ein Vordergrundbild, das es darüberlegt. In diesem Fall wäre dies der blaue Hintergrund und der weiße Stern. Da ich mir den Aufwand nicht antun will, habe ich einfach bei beiden Attributen die gleiche Datei angegeben.
flutter_icons:
android: true
ios: true
image_path: "assets/icon.png"
adaptive_icon_background: "assets/icon.png"
adaptive_icon_foreground: "assets/icon.png"
Funktioniert auch einwandfrei. :) Und so sieht das dann bei Android aus. Toll, oder?
Du kannst natürlich aber immer zwei Bilddateien anlegen, wenn du Lust hast. Vor allem, wenn du findest, dass bei Android viel zu nah ins Bild hereingezoomt wird und du an den Rändern mehr Platz haben willst.
Trouble Shooting
Bei mir ist am Anfang noch ein kleiner Fehler aufgetaucht, als ich die App Icons über das Flutter Launcher Icons Package generieren wollte: pub finished with exit code 255 Hier gibt es einen Workaround. Gehe in deine build.gradle Datei und ändere in der defaultConfig die sdk Version zu:
defaultConfig {
applicationId "com.example.example_app"
minSdkVersion 19
targetSdkVersion 24
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
Führe dann noch einmal flutter pub run flutter_launcher_icons:main aus. Jetzt sollte es ohne Fehler ausführen. Wenn dies erledigt ist, mache die Änderungen in der build.gradle Datei wieder rückgängig.
Und das war’s. Hast du Anregungen oder Ideen für weitere Artikel? Schreib uns: mail@flutter.de
Weiterführende Artikel:
Wenn du erfolgreich das Icon eingebaut hast, könntest du auch deinen Splash-Screen anpassen oder finde heraus, welche weiteren Packages du als Flutter Entwickler kennen solltest. Oder erfahre alles über nützliche VS Code Flutter Extensions!