icône-de-lancement-flutter-ios

Écran de lancement Flutter iOS et icônes d'applications

Modèle éprouvé pour les applications Flutter : logo de lancement natif visible dès la première image, plus icônes d'accueil qui suivent Personnaliser → Défaut / Sombre / Transparent / Teinté sur iOS.

Quand l'utiliser

• Le démarrage à froid affiche un écran blanc/ivoire avant que Flutter ne charge
• Besoin de logos de lancement clair + sombre qui suivent l'apparence système (pas le ThemeCubit de l'application)
• Besoin de variantes d'icônes d'applications Sombre / Teinté / Transparent sur iOS 18+

Quand ne pas l'utiliser

• Uniquement splash Android / écran de démarrage Flutter dans l'application
• Changement de thème dans l'application (HydratedBloc) — cela ne pilote pas l'écran de lancement ni les icônes SpringBoard

Règles critiques (à ne pas ignorer)

1. Les logos de lancement doivent être des PNG bruts dans le bundle de l'application, pas des imagesets de l'Asset Catalog. SplashBoard échoue souvent avec UIImage imageNamed depuis Assets.car lors de la première capture → écran vide pendant 2–3 secondes.
2. Ne placez pas BrandLogo dans Assets.xcassets si le même nom de base existe en tant que fichier brut — le catalogue gagne et le chargement échoue.
3. Les couleurs d'arrière-plan sur le LaunchScreen doivent être sRGB explicites dans le storyboard. Les couleurs nommées (p. ex. LaunchBackground) échouent souvent lors de la capture de l'écran de lancement.
4. La clé de variation de trait est userInterfaceStyle=dark (pas interfaceStyle, pas luminosity=dark).
5. Ne vérifiez jamais le lancement en copiant un storyboardc ibtool autonome dans un .app déjà construit — cela produit un flash noir. Toujours flutter build ios --simulator (ou appareil) puis désinstaller + réinstaller.
6. N'exécutez pas flutter_launcher_icons après avoir ajouté Sombre/Teinté — cela écrase Contents.json et supprime les apparences.
7. L'icône d'accueil suit l'apparence iPhone / Personnaliser, pas le thème Flutter. Transparent est dérivé de Teinté ; il n'y a pas de slot séparé pour Transparent.

Liste de contrôle du workflow

Progression :
- [ ] 1. Générer les PNG de lancement clair et nuit (@1x/@2x/@3x)
- [ ] 2. Copier dans ios/Runner/ et ajouter aux Ressources du Bundle (pbxproj)
- [ ] 3. Supprimer tout BrandLogo*.imageset de Assets.xcassets
- [ ] 4. Mettre à jour LaunchScreen.storyboard (noms d'images bruts + couleurs explicites)
- [ ] 5. Optionnel : LaunchBackground.colorset pour Main.storyboard / transmission SceneDelegate uniquement
- [ ] 6. Générer l'icône d'application sombre + teintée 1024 (et tailles d'accueil si on conserve les entrées existantes)
- [ ] 7. Mettre à jour AppIcon.appiconset/Contents.json avec luminosity dark + tinted
- [ ] 8. flutter build ios --simulator --debug
- [ ] 9. simctl uninstall + install ; vérifier le lancement <0,5 s et les apparences d'icônes dans Assets.car

Étape 1 — Générer les logos de lancement

Utilisez scripts/generate_launch_logos.py.

Entrées :

• Logo source avec fond de studio sombre (typique assets/logo/logo.png)
• Clair : noir supprimé → couleurs de marque bicolores conservées
• Sombre : même masque alpha, or uni #E0B45D (ou couleur primaire du projet)
• Tailles : 400×363 @1x, 800×727 @2x, 1200×1090 @3x (ajuster l'aspect à votre logo)

Formule de suppression (correspond à Flutter SplashLogo si présent) :

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

Fichiers de sortie dans ios/Runner/ :

• BrandLogo.png, [email protected], [email protected]
• BrandLogoNight.png, [email protected], [email protected]

Étape 2 — Ressources du bundle

Dans ios/Runner.xcodeproj/project.pbxproj :

• Ajouter PBXFileReference + PBXBuildFile pour les six PNG
• Les lister dans le groupe Runner et dans Copier les ressources du bundle
• lastKnownFileType = image.png ; mettre entre guillemets les chemins @2x / @3x

Supprimer ios/Runner/Assets.xcassets/BrandLogo.imageset et BrandLogoNight.imageset s'ils existent.

Après la construction, vérifier :

# BrandLogo ne doit PAS être dans Assets.car ; les PNG doivent exister dans Runner.app
find build/ios/iphonesimulator/Runner.app -name 'BrandLogo*.png'
xcrun assetutil --info build/ios/iphonesimulator/Runner.app/Assets.car | grep -i BrandLogo || true

Étape 3 — LaunchScreen.storyboard

Utiliser le format IB moderne (toolsVersion ≥ 21701, useTraitCollections, capacité « documents saved in the Xcode 8 format »).

Motif (modèle complet : references/launch-storyboard.md) :

• UIImageView contentMode="scaleAspectFit", image BrandLogo
• Variation : key="userInterfaceStyle=dark" image="BrandLogoNight"
• Largeur ≈ 0,28–0,40 de la vue parente (commencer ~0,32) ; hauteur = largeur × aspect du logo
• Contraintes centrées X/Y
• Fond clair sRGB explicite (p. ex. ivoire #FFFCF7)
• Variation fond sombre sRGB explicite (p. ex. #17120E)
• <resources> doit déclarer les deux noms d'images avec tailles intrinsèques

Info.plist : UILaunchStoryboardName = LaunchScreen.

Étape 4 — Transmission Flutter (optionnelle mais recommandée)

Empêcher le flash blanc lorsque Flutter prend le relais :

• LaunchBackground.colorset avec luminosité claire + sombre (OK pour l'interface non de lancement)
• Fond de VC Main.storyboard → nommé LaunchBackground
• SceneDelegate / FlutterViewController personnalisé : définir view.backgroundColor et window.backgroundColor à partir de UIColor(named: "LaunchBackground") dans viewDidLoad / viewDidLayoutSubviews

Étape 5 — Apparences des icônes d'applications (iOS 18+)

Générer avec scripts/generate_app_icon_variants.py à partir de l'icône marketing 1024 (fond crème + logo).

Apparence	Œuvre
Défaut (Tout)	Icône claire existante
Sombre	Logo or sur fond sombre (#17120E) ou fond transparent selon HIG Apple
Teinté	Niveaux de gris : logo blanc/gris sur noir (le système applique la teinte)
Transparent	Dérivé automatiquement de Teinté — aucune entrée Contents.json

Mettre à jour AppIcon.appiconset/Contents.json — voir references/appicon-contents.md.

Privilégier les entrées universelles 1024 de taille unique avec :

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

Conserver les entrées iPhone par taille existantes si le projet les utilise encore ; ajouter sombre/teinté pour 60pt @2x/@3x + marketing 1024 au minimum.

Valider :

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'

L'application construite doit lister AppIcon avec UIAppearanceDark et ISAppearanceTintable.

Étape 6 — Vérifier sur le simulateur

flutter build ios --simulator --debug
xcrun simctl uninstall booted <bundle.id>
xcrun simctl install booted build/ios/iphonesimulator/Runner.app
# Lancement : attendre le logo vers 0,4–0,5 s (pas d'écran vide de plusieurs secondes)
# Icône : Personnaliser → Sombre / Teinté ; peut nécessiter suppression+réinstallation pour le cache SpringBoard

simctl nécessite des autorisations complètes dans les environnements d'agents sandboxés.

Ne pas rm -rf les caches SplashBoard ; désinstaller + réinstaller efface les captures d'écran de lancement.

Valeurs par défaut de la marque (à remplacer par projet)

Jeton	Défaut
Fond de lancement clair	#FFFCF7
Fond de lancement sombre	#17120E
Or du logo sombre	#E0B45D
Largeur du logo de lancement	32% de l'écran
Fond d'icône sombre	#17120E

Demander à l'utilisateur les valeurs hexadécimales de la marque lorsque le projet diffère.

Ressources supplémentaires

• Modèle XML du storyboard : references/launch-storyboard.md
• Formes du Contents.json de l'icône d'application : references/appicon-contents.md
• Script du logo de lancement : scripts/generate_launch_logos.py
• Script des variantes d'icônes : scripts/generate_app_icon_variants.py