CommunityImagemgithub.com

flutter-ios-launch-icons

Implementa a LaunchScreen nativa do iOS para Flutter com logotipos claro/escuro instantâneos e aparências de ícone da tela inicial para iOS 18+ (Padrão, Escuro, Tintado, Claro). Use quando o usuário pedir logotipo de inicialização iOS, storyboard de splash, tela branca ao abrir o app, ícone de app em modo escuro, ícones tintados/transparentes ou branding adaptável à aparência no iOS.

O que é flutter-ios-launch-icons?

Esta skill fornece um padrão robusto e testado para eliminar a tela branca inicial (cold start) em apps Flutter no iOS, garantindo que o logotipo da marca apareça no primeiro frame da LaunchScreen nativa, antes mesmo do Flutter ser carregado. Ela lida com a criação de variantes de logotipo claro e escuro (como PNGs avulsos no bundle do app, não em Assets.car), a configuração correta do storyboard LaunchScreen com variações de aparência (userInterfaceStyle=dark) e cores de fundo explícitas em sRGB, e a adição de ícones de aplicativo com suporte a aparências no iOS 18+ (Padrão, Escuro, Tintado, Claro). A skill também oferece scripts de geração de logotipos e ícones, uma checklist de workflow passo a passo e dicas de validação com comandos de terminal. É útil para desenvolvedores Flutter que enfrentam problemas de splash atrasado ou desejam oferecer uma experiência de marca consistente e adaptável ao tema do sistema iOS, suportando desde o Xcode 15+ até o iOS 18+. Ela inclui regras críticas para evitar armadilhas comuns, como o uso de catálogos de ativos para logotipos de inicialização.

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

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

Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Tela de Inicialização e Ícones de Aplicativo no iOS para Flutter

Padrão testado em batalha para apps Flutter: logotipo de inicialização nativo no primeiro frame, mais ícones da tela inicial que seguem o Personalizar do iOS → Padrão / Escuro / Claro / Tintado.

Quando usar

  • A inicialização a frio mostra uma tela branca/marfim antes do Flutter carregar
  • Precisa de logotipos de inicialização claro + escuro que acompanham a aparência do sistema (não o ThemeCubit do app)
  • Precisa de variantes de ícone do app Escuro / Tintado / Claro no iOS 18+

Quando não usar

  • Splash Android / SplashScreen do Flutter in-app apenas
  • Alternar tema in-app (HydratedBloc) — isso não controla a LaunchScreen nem os ícones da SpringBoard

Regras críticas (não pule)

  1. Logotipos de inicialização devem ser PNGs avulsos no bundle do app, não conjuntos de imagens do Catálogo de Ativos. O SplashBoard frequentemente falha ao usar UIImage imageNamed do Assets.car no primeiro snapshot → tela em branco por 2–3s.
  2. Não coloque BrandLogo em Assets.xcassets se o mesmo nome base existir como arquivo avulso — o catálogo vence e o carregamento falha.
  3. As cores de fundo na LaunchScreen devem ser sRGB explícitas no storyboard. Cores nomeadas (ex. LaunchBackground) frequentemente falham ao alternar no snapshot de inicialização.
  4. A chave de variação de trait é userInterfaceStyle=dark (não interfaceStyle, nem luminosity=dark).
  5. Nunca verifique a inicialização copiando um storyboardc ibtool avulso em um .app já compilado — isso gera um flash preto. Sempre use flutter build ios --simulator (ou dispositivo) e depois desinstale + reinstale.
  6. Não execute flutter_launcher_icons depois de adicionar Escuro/Tintado — ele sobrescreve o Contents.json e remove as aparências.
  7. O ícone da tela inicial segue a aparência do iPhone / Personalizar, não o tema Flutter. Claro é derivado de Tintado; não existe slot separado para Claro.

Checklist de workflow

Progresso:
- [ ] 1. Gerar PNGs de inicialização claro + noturno (@1x/@2x/@3x)
- [ ] 2. Copiar para ios/Runner/ e adicionar ao Copy Bundle Resources (pbxproj)
- [ ] 3. Remover qualquer BrandLogo*.imageset de Assets.xcassets
- [ ] 4. Atualizar LaunchScreen.storyboard (nomes de imagem avulsos + cores explícitas)
- [ ] 5. Opcional: LaunchBackground.colorset para Main.storyboard / SceneDelegate handoff apenas
- [ ] 6. Gerar ícone do app escuro + tintado 1024 (e tamanhos da tela inicial se mantendo entradas legadas)
- [ ] 7. Atualizar AppIcon.appiconset/Contents.json com luminosity dark + tinted
- [ ] 8. flutter build ios --simulator --debug
- [ ] 9. simctl uninstall + install; verificar inicialização <0,5s e aparências do ícone em Assets.car

Passo 1 — Gerar logotipos de inicialização

Use scripts/generate_launch_logos.py.

Entradas:

  • Logotipo fonte com fundo de estúdio escuro (típico assets/logo/logo.png)
  • Claro: preto recortado → cores da marca preservadas em dois tons
  • Escuro: mesma máscara alfa, dourado sólido #E0B45D (ou cor primária do projeto)
  • Tamanhos: 400×363 @1x, 800×727 @2x, 1200×1090 @3x (ajuste a proporção ao seu logotipo)

Fórmula de recorte (combinar com SplashLogo do Flutter se presente):

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

Arquivos de saída em ios/Runner/:

Passo 2 — Recursos do bundle

Em ios/Runner.xcodeproj/project.pbxproj:

  • Adicione PBXFileReference + PBXBuildFile para todos os seis PNGs
  • Liste-os no grupo Runner e em Copy Bundle Resources
  • lastKnownFileType = image.png; coloque os caminhos @2x / @3x entre aspas

Delete ios/Runner/Assets.xcassets/BrandLogo.imageset e BrandLogoNight.imageset se existirem.

Após a compilação, confirme:

# BrandLogo NÃO deve estar em Assets.car; os PNGs devem existir em 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

Passo 3 — LaunchScreen.storyboard

Use formato IB moderno (toolsVersion ≥ 21701, useTraitCollections, capability "documents saved in the Xcode 8 format").

Padrão (modelo completo: references/launch-storyboard.md):

  • UIImageView contentMode="scaleAspectFit", imagem BrandLogo
  • Variação: key="userInterfaceStyle=dark" image="BrandLogoNight"
  • Largura ≈ 0,28–0,40 da superview (comece ~0,32); altura = largura × proporção do logotipo
  • Restrições de centro X/Y
  • Fundo claro sRGB explícito (ex. marfim #FFFCF7)
  • Variação de fundo escuro sRGB explícito (ex. #17120E)
  • <resources> deve declarar ambos os nomes de imagem com tamanhos intrínsecos

Info.plist: UILaunchStoryboardName = LaunchScreen.

Passo 4 — Handoff do Flutter (opcional, mas recomendado)

Evite flash branco quando o Flutter assumir:

  • LaunchBackground.colorset com luminosidade clara + escura (OK para UI não inicial)
  • Fundo do VC do Main.storyboard → nomeado LaunchBackground
  • SceneDelegate / FlutterViewController personalizado: defina view.backgroundColor e window.backgroundColor a partir de UIColor(named: "LaunchBackground") em viewDidLoad / viewDidLayoutSubviews

Passo 5 — Aparências do ícone do app (iOS 18+)

Gere com scripts/generate_app_icon_variants.py a partir do ícone de marketing 1024 (fundo creme + logotipo).

AparênciaArte
Padrão (Any)Ícone claro existente
EscuroLogotipo dourado sobre placa escura (#17120E) ou fundo transparente conforme HIG da Apple
TintadoEscala de cinza: logotipo branco/cinza sobre preto (o sistema aplica a tinta)
ClaroDerivado automaticamente de Tintado — nenhuma entrada em Contents.json

Atualize AppIcon.appiconset/Contents.json — veja references/appicon-contents.md.

Prefira entradas universais de Tamanho Único 1024 com:

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

Mantenha entradas legadas por tamanho do iPhone se o projeto ainda as usar; adicione escuro/tintado para 60pt @2x/@3x + marketing 1024 no mínimo.

Valide:

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'

O app compilado deve listar AppIcon com UIAppearanceDark e ISAppearanceTintable.

Passo 6 — Verificar no simulador

flutter build ios --simulator --debug
xcrun simctl uninstall booted <bundle.id>
xcrun simctl install booted build/ios/iphonesimulator/Runner.app
# Inicializar: esperar logotipo em ~0,4–0,5s (não tela em branco por vários segundos)
# Ícone: Personalizar → Escuro / Tintado; pode ser necessário deletar+reinstalar para cache da SpringBoard

simctl precisa de permissões completas em ambientes agent com sandbox.

Não rm -rf caches do SplashBoard; desinstalar + reinstalar limpa os snapshots de inicialização.

Padrões da marca (substituir por projeto)

TokenPadrão
Fundo de inicialização claro#FFFCF7
Fundo de inicialização escuro#17120E
Dourado do logotipo escuro#E0B45D
Largura do logotipo de inicialização32% da tela
Placa do ícone escuro#17120E

Pergunte ao usuário os valores hex da marca quando o projeto diferir.

Recursos adicionais

Habilidades Relacionadas

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 Imagem skills