CommunityBildgithub.com

Flutter iOS Launch & App Icons

Implementiert native iOS LaunchScreen mit sofortigen Light/Dark-Logos sowie iOS 18+ Home-Bildschirm AppIcon-Varianten (Default, Dark, Tinted, Clear). Verwende dies, wenn der Benutzer nach iOS Launch-Logo, Splash-Storyboard, Cold-Start weißem Bildschirm, Dark-Mode App-Icon, Tinted/Clear Icons oder appearance-bewusstem Branding auf iOS fragt.

Was ist Flutter iOS Launch & App Icons?

Dieses Skill ist eine bewährte Lösung für Flutter-Apps, die unter iOS einen sofortigen nativen Launch-Screen ohne den typischen weißen (oder elfenbeinfarbenen) Cold-Start-Bildschirm anzeigen möchten. Es stellt sicher, dass das Launch-Logo bereits im **ersten Frame** erscheint, bevor die Flutter-Engine geladen ist. Dafür werden die Launch-Logos als lose PNGs direkt in das App-Bundle eingebunden, anstatt sie über Asset Catalogs zu referenzieren – da letztere beim ersten Snapshot oft fehlschlagen und zu einem leeren Bildschirm führen. Zusätzlich wird die Unterstützung für iOS 18+ App-Icon-Varianten (Dark, Tinted, Clear) implementiert, die über die Systemeinstellungen „Anpassen“ gesteuert werden. Das Skill enthält detaillierte Schritt-für-Schritt-Anleitungen sowie Python-Skripte zur Generierung der benötigten Bilddateien. Die strikten Regeln zur Vermeidung von Fehlern (z.B. keine Asset Catalog Imagesets für Launch-Logos, explizite sRGB-Farben im Storyboard, korrekte Trait-Variation Keys) sind klar dokumentiert. Es wird für Cursor, Claude Code und Codex genutzt und erfordert, dass der Benutzer die Flutter-iOS-Umgebung sowie die simctl-Befehle verwenden kann.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/haithemnini/agent-skills/tree/HEAD/skills/flutter-ios-launch-icons

Installed? Explore more Bild skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Flutter iOS Launch Screen & App Icons

Bewährtes Muster für Flutter-Apps: natives Launch-Logo im ersten Frame, plus Home-Bildschirm Icons, die auf iOS Anpassen → Standard / Dunkel / Klar / Getönt reagieren.

Wann verwenden

  • Kaltstart zeigt einen leeren weißen/elfenbeinfarbenen Bildschirm, bevor Flutter lädt
  • Benötigt helle + dunkle Launch-Logos, die der System-Darstellung folgen (nicht dem In-App ThemeCubit)
  • Benötigt App Icon Dunkel / Getönt / Klar Varianten unter iOS 18+

Wann nicht verwenden

  • Nur Android Splash / Flutter In-App SplashScreen
  • Nur In-App Theme-Umschaltung (HydratedBloc) – diese steuert nicht LaunchScreen oder SpringBoard Icons

Kritische Regeln (nicht überspringen)

  1. Launch-Logos müssen lose PNGs im App-Bundle sein, keine Asset Catalog Imagesets. SplashBoard schlägt oft bei UIImage imageNamed aus Assets.car beim ersten Snapshot fehl → leerer Canvas für 2–3s.
  2. BrandLogo nicht in Assets.xcassets ablegen, wenn der gleiche Basisname als lose Datei existiert – der Katalog gewinnt und das Laden schlägt fehl.
  3. Hintergrundfarben im LaunchScreen müssen explizit sRGB im Storyboard sein. Benannte Farben (z.B. LaunchBackground) wechseln oft nicht beim Launch-Snapshot.
  4. Trait-Variation-Key ist userInterfaceStyle=dark (nicht interfaceStyle, nicht luminosity=dark).
  5. Launch niemals durch Kopieren eines eigenständigen ibtool storyboardc in eine bereits erstellte .app überprüfen – das führt zu einem schwarzen Bildschirm. Immer flutter build ios --simulator (oder Gerät) und dann deinstallieren + neu installieren.
  6. flutter_launcher_icons nicht ausführen, nachdem Dark/Tinted hinzugefügt wurden – es überschreibt Contents.json und entfernt Darstellungen.
  7. Das Home-Icon folgt der iPhone-Darstellung / Anpassen, nicht dem Flutter-Theme. Klar wird von Getönt abgeleitet; es gibt keinen separaten Klar-Slot.

Workflow-Checkliste

Fortschritt:
- [ ] 1. Helle + dunkle Launch-PNGs generieren (@1x/@2x/@3x)
- [ ] 2. In ios/Runner/ kopieren und zu Copy Bundle Resources hinzufügen (pbxproj)
- [ ] 3. Alle BrandLogo*.imageset aus Assets.xcassets entfernen
- [ ] 4. LaunchScreen.storyboard aktualisieren (lose Bildnamen + explizite Farben)
- [ ] 5. Optional: LaunchBackground.colorset für Main.storyboard / SceneDelegate-Übergabe nur
- [ ] 6. AppIcon dark + tinted 1024 generieren (und Home-Größen, wenn Legacy-Einträge behalten werden)
- [ ] 7. AppIcon.appiconset/Contents.json mit luminosity dark + tinted aktualisieren
- [ ] 8. flutter build ios --simulator --debug
- [ ] 9. simctl uninstall + install; Launch <0,5s und Icon-Darstellungen in Assets.car überprüfen

Schritt 1 — Launch-Logos generieren

Verwende scripts/generate_launch_logos.py.

Eingaben:

  • Quell-Logo mit dunklem Studio-Hintergrund (typisch assets/logo/logo.png)
  • Hell: Schwarz ausgestanzt → zweifarbige Markenfarben erhalten
  • Dunkel: Gleiche Alpha-Maske, sattes Gold #E0B45D (oder Projekt-Primärfarbe)
  • Größen: 400×363 @1x, 800×727 @2x, 1200×1090 @3x (Seitenverhältnis an Ihr Logo anpassen)

Ausstanzformel (passend zu Flutter SplashLogo, falls vorhanden):

alpha_out = min(255, 4 * (R + G + B), source_alpha)

Ausgabedateien in ios/Runner/:

Schritt 2 — Bundle-Ressourcen

In ios/Runner.xcodeproj/project.pbxproj:

  • PBXFileReference + PBXBuildFile für alle sechs PNGs hinzufügen
  • Diese in der Runner-Gruppe und in Copy Bundle Resources auflisten
  • lastKnownFileType = image.png; @2x / @3x Pfade in Anführungszeichen

Lösche ios/Runner/Assets.xcassets/BrandLogo.imageset und BrandLogoNight.imageset, falls vorhanden.

Nach dem Build bestätigen:

# BrandLogo darf NICHT in Assets.car sein; PNGs müssen in Runner.app existieren
find build/ios/iphonesimulator/Runner.app -name 'BrandLogo*.png'
xcrun assetutil --info build/ios/iphonesimulator/Runner.app/Assets.car | grep -i BrandLogo || true

Schritt 3 — LaunchScreen.storyboard

Modernes IB-Format verwenden (toolsVersion ≥ 21701, useTraitCollections, Fähigkeit „Dokumente im Xcode 8-Format gespeichert“).

Muster (vollständige Vorlage: references/launch-storyboard.md):

  • UIImageView contentMode="scaleAspectFit", Bild BrandLogo
  • Variation: key="userInterfaceStyle=dark" image="BrandLogoNight"
  • Breite ≈ 0,28–0,40 des übergeordneten Views (Start ~0,32); Höhe = Breite × Logo-Seitenverhältnis
  • Zentrierungs-X/Y-Constraints
  • Heller Hintergrund explizit sRGB (z.B. Elfenbein #FFFCF7)
  • Dunkler Hintergrund Variation explizit sRGB (z.B. #17120E)
  • <resources> muss beide Bildnamen mit intrinsischen Größen deklarieren

Info.plist: UILaunchStoryboardName = LaunchScreen.

Schritt 4 — Flutter-Übergabe (optional, aber empfohlen)

Weißen Bildschirm verhindern, wenn Flutter übernimmt:

  • LaunchBackground.colorset mit heller + dunkler Luminosität (OK für Nicht-Launch-UI)
  • Main.storyboard VC-Hintergrund → benannte Farbe LaunchBackground
  • SceneDelegate / benutzerdefinierter FlutterViewController: view.backgroundColor und window.backgroundColor von UIColor(named: "LaunchBackground") in viewDidLoad / viewDidLayoutSubviews setzen

Schritt 5 — App Icon Darstellungen (iOS 18+)

Mit scripts/generate_app_icon_variants.py aus dem 1024 Marketing-Icon (Creme-Hintergrund + Logo) generieren.

DarstellungGrafik
Standard (Beliebig)Bestehendes helles Icon
DunkelGold-Logo auf dunkler Platte (#17120E) oder transparentem Hintergrund gemäß Apple HIG
GetöntGraustufen: weißes/graues Logo auf Schwarz (System wendet Tönung an)
KlarAutomatisch von Getönt abgeleitet – kein Contents.json-Eintrag

AppIcon.appiconset/Contents.json aktualisieren – siehe references/appicon-contents.md.

Universelle 1024-Einträge mit Einzelgröße bevorzugen:

"appearances": [{ "appearance": "luminosity", "value": "dark" }]
"appearances": [{ "appearance": "luminosity", "value": "tinted" }]

Legacy-Einträge pro Größe für iPhone behalten, falls das Projekt sie noch verwendet; mindestens dunkel/getönt für 60pt @2x/@3x + Marketing 1024 hinzufügen.

Validieren:

xcrun actool ios/Runner/Assets.xcassets --compile /tmp/icons \
  --platform iphonesimulator --minimum-deployment-target 15.0 \
  --app-icon AppIcon --output-partial-info-plist /tmp/icon-partial.plist
xcrun assetutil --info /tmp/icons/Assets.car | grep -E 'UIAppearanceDark|ISAppearanceTintable'

Die erstellte App sollte AppIcon mit UIAppearanceDark und ISAppearanceTintable auflisten.

Schritt 6 — Auf Simulator überprüfen

flutter build ios --simulator --debug
xcrun simctl uninstall booted <bundle.id>
xcrun simctl install booted build/ios/iphonesimulator/Runner.app
# Start: Logo nach ca. 0,4–0,5 s erwarten (nicht mehrsekündiger leerer Bildschirm)
# Icon: Anpassen → Dunkel / Getönt; ggf. löschen + neu installieren für SpringBoard-Cache

simctl benötigt volle Berechtigungen in sandboxierten Agent-Umgebungen.

rm -rf von SplashBoard-Caches nicht ausführen; Deinstallieren + Neuinstallieren löscht Launch-Snapshots.

Marken-Standardwerte (pro Projekt überschreibbar)

TokenStandard
Heller Launch-Hintergrund#FFFCF7
Dunkler Launch-Hintergrund#17120E
Dunkles Logo-Gold#E0B45D
Launch-Logo-Breite32% des Bildschirms
Dunkle Icon-Platte#17120E

Fragen Sie den Benutzer nach Marken-Hex-Werten, wenn das Projekt abweicht.

Zusätzliche Ressourcen

Verwandte Skills

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More Bild skills