Icons & Splash at Scale: One Source, Many Targets

Flutter

A solid strategy for Flutter icon and splash assets saves hours per release. This guide shows how to drive iOS and Android from a single source image, automate generation, and keep assets reproducible across teams and CI.

Audience: IntermediateTested on: Flutter 3.x, Dart 3.x, Android 14, iOS 17, macOS/Windows

Principles: one source, many targets

  • Single square master: 1024×1024 PNG, no rounded corners, no transparency for iOS marketing icon.
  • Deterministic config: store generation settings in pubspec.yaml, commit them to git.
  • Automate: let CI regenerate icons/splash on demand; never hand-edit platform folders.

App icons with flutter_launcher_icons

Use a single master icon and let the tool create all sizes, including Android adaptive layers.

# pubspec.yaml (excerpt)
dev_dependencies:
  flutter_launcher_icons: ^0.13.1  # or latest

flutter_launcher_icons:
  image_path: assets/icon/app_icon.png   # 1024x1024, square, no rounded corners
  android: true
  ios: true
  remove_alpha_ios: true                 # iOS marketing icon cannot have transparency
  min_sdk_android: 21

  # Adaptive icons (Android 8+)
  adaptive_icon_foreground: assets/icon/fg.png   # centered glyph (~70-80% of canvas)
  adaptive_icon_background: "#121212"            # brand color or image path

# Generate
dart run flutter_launcher_icons
# or
flutter pub run flutter_launcher_icons

Android output: mipmap-* plus adaptive ic_launcher.xml (foreground/background).
iOS output: Runner/Assets.xcassets/AppIcon.appiconset including 1024×1024 marketing icon.

Splash screens with flutter_native_splash

Display a native splash (pre-Flutter frame) that matches your brand and supports Android 12+.

# pubspec.yaml (excerpt)
dev_dependencies:
  flutter_native_splash: ^2.4.0  # or latest

flutter_native_splash:
  color: "#121212"                  # solid background (avoid transparency/gradients)
  image: assets/splash/logo.png     # square logo, no small text
  android_12:
    color: "#121212"
    image: assets/splash/logo_android12.png
  # Optional dark mode
  color_dark: "#000000"
  image_dark: assets/splash/logo_dark.png

# Generate
dart run flutter_native_splash:create
# or
flutter pub run flutter_native_splash:create

Design tips: keep the glyph within ~60% of the shortest edge, leave generous padding, avoid fine detail and taglines.

Environment-aware branding (dev/qa/prod)

When you need variant icons or splash colors per environment, switch source paths via --dart-define-from-file or by maintaining small per-env YAML snippets that you merge into the main pubspec.yaml during CI.

# Example: CI step (bash-like pseudo)
if [ "$FLAVOR" = "qa" ]; then
  yq -i '.flutter_launcher_icons.image_path = "assets/icon/app_icon_qa.png"' pubspec.yaml
fi
dart run flutter_launcher_icons
dart run flutter_native_splash:create

CI recipe (GitHub Actions)

- name: Generate icons & splash
  run: |
    flutter pub get
    dart run flutter_launcher_icons
    dart run flutter_native_splash:create

- name: Build (QA APK)
  run: flutter build apk --release --split-per-abi \
       --dart-define-from-file=tool/env/qa.json

- name: Build (Play AAB)
  run: flutter build appbundle --release \
       --dart-define-from-file=tool/env/prod.json \
       --obfuscate --split-debug-info=out/symbols/${{ github.run_id }}

Quality checklist

  • No rounded corners in the master icon (platform masks apply shapes).
  • No transparency for the iOS marketing icon (remove_alpha_ios).
  • High contrast and simplified shapes; avoid tiny text and thin strokes.
  • Stale cache? Uninstall app → flutter clean → rebuild.

Security & pitfalls

  • Manual edits in Xcode/Android Studio are fragile—prefer the generators.
  • Adaptive mismatch: foreground too large causes clipping on circles/squircles—leave ~10–20% padding.
  • Dark mode: provide explicit dark assets/colors to avoid washed-out visuals.

FAQ

Q. Can I start from SVG?
A. Yes—export to 1024×1024 PNG (square). Keep edges crisp and avoid semi-transparent overlays.

Q. Do I need separate splash for Android 12?
A. The plugin supports it via android_12—use it for best alignment and sizing.

Q. The icon didn’t change on the device.
A. Uninstall the app and rebuild; verify updated files under mipmap-* and the iOS asset catalog.

Conclusion

Centralize assets, commit generator configs, and automate runs in CI. With one master icon and a clean splash configuration, your Flutter icon and splash stay consistent across environments and releases.

https://pub.dev/packages/flutter_launcher_icons
https://pub.dev/packages/flutter_native_splash
https://developer.android.com/develop/ui/views/launch/icon_design_adaptive
https://developer.apple.com/design/human-interface-guidelines/app-icons
https://developer.apple.com/design/human-interface-guidelines/launch-screen

Updated: 2025-10-27

Comment

Copied title and URL