How to Create a Flutter Splash Screen Image (iOS & Android)

Flutter

A splash screen is the very first screen shown while your app process starts—before Flutter renders its first frame. It gives users instant visual feedback (brand + theme) and hides cold-start jitters.

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

Quick start: flutter_native_splash

The simplest, reproducible way to add a splash screen (including Android 12+ API) is the community tool flutter_native_splash. Provide a high-res centered image (e.g., 1024×1024 PNG) and a background color, and let the tool generate platform assets.

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

flutter_native_splash:
  color: "#121212"               # background color (no transparency)
  image: assets/splash/icon.png  # centered logo (no text; ~60–70% of shortest edge)
  android_12:
    color: "#121212"
    image: assets/splash/icon_android12.png  # optional, can reuse image
  # Optional dark mode
  color_dark: "#000000"
  image_dark: assets/splash/icon_dark.png

Generate assets:

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

How it works on each platform

Android: For Android 12+, the tool configures the SplashScreen API (window background + centered drawable). For older Android, it sets theme drawables so the splash shows before the first Flutter frame.
iOS: It edits LaunchScreen.storyboard to place the centered image and background color, so it appears while the app initializes.

Design guidelines (what to place on the splash)

  • Logo only, no small text. Keep brand mark clean; tiny text gets blurred.
  • Safe scale: Fit the glyph within ~60% of the shortest screen edge; leave generous padding to avoid clipping on tall/round screens.
  • Solid background. Prefer a plain brand color. Avoid gradients and transparency (App Stores may compress differently).
  • Dark mode variants. Provide color_dark/image_dark for comfortable night use.

Exporting the splash image

Create a square PNG (1024×1024 recommended). Do not add rounded corners or device frames; the tool centers and scales it for you. If you need different compositions (Android 12 foreground vs legacy), supply a separate asset via android_12.image.

Manual customization (if you can’t use the plugin)

Android

  1. Set windowBackground in a launch theme to a solid color.
  2. Add a centered drawable (vector/PNG) to the theme for pre-Flutter display.
  3. On Android 12+, define windowSplashScreenBackground and windowSplashScreenAnimatedIcon in the splash theme.

iOS

  1. Open Xcode → Runner/Runner/LaunchScreen.storyboard.
  2. Set a background color view, center an image view, add size constraints.
  3. Avoid autolayout ambiguity; keep “Aspect Fit”.

Security & pitfalls

  • Do not fetch from network. The splash must be instant and offline.
  • No fine detail. Thin lines and text will shimmer on low-dpi devices.
  • Clipping on tall screens. Reduce the glyph scale (keep generous margins).
  • Stuck splash. Avoid heavy work in main() before runApp(); hand off initialization to the Flutter phase.

Troubleshooting

Image looks cropped? Lower the logo size to ~50–60% of the shortest edge. Ensure PNG has no extra transparent padding you didn’t account for.

Dark mode looks wrong? Provide explicit color_dark and image_dark. Re-run the generator and rebuild.

Changes not showing? Run flutter clean, uninstall the app, and rebuild. On iOS, confirm in Xcode’s LaunchScreen preview.

FAQ

Q: Can I animate the splash?
A: Native splash cannot be arbitrarily animated. Show a static native splash, then display an in-Flutter animated intro after the first frame if needed.

Q: Should I include app name or tagline?
A: Avoid text. It gets cropped/blurred and makes localization harder.

Q: Is SVG supported?
A: Convert to PNG. Keep it square and high-contrast.

Conclusion

Use flutter_native_splash with a clean logo and solid background for instant, consistent startup visuals. Keep the design simple, provide dark mode variants, and let the tool target Android 12+ and iOS natively.

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

Updated: 2025-10-07

Comment

Copied title and URL