Eigenes App Icon in Flutter einbinden

Eigenes App Icon in Flutter einbinden

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 Hussle nicht geben 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 sdkVersion 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!

    => Splash Screen in Flutter einfügen
    => Flutter Packages, die du kennen solltest
    => Nützliche VS Code Flutter Extensions

    Werde zum Flutter-Experten

    Lerne Flutter von den Profis – persönlich und vor Ort. Mit unseren Flutter-Schulungen kommst du auf nächste Entwickler-Level.

    Flutter Schulung entdecken