Adding a Splash Screen to Your Flutter App

A splash screen (also called Launch Screen on iOS) is the first thing users see when your app starts.

Adding a Splash Screen to Your Flutter App

Without it, users often see a blank white screen during cold launch, which feels unprofessional.

A splash screen bridges that gap while Flutter renders the first frame.

Why Do We Need a Splash Screen?

When your app launches:

1. OS starts your app
2. Flutter engine initializes
3. The first frame is drawn

This takes time (even if small).

Splash screen ensures users see something meaningful instead of a blank screen.

Two Ways to Add a Splash Screen

1. Use a package (recommended)
2. Manually configure native files (Android + iOS)

We’ll use the simplest and most popular approach:

*flutter_native_splash*

Step 1: Add the Package

flutter pub add flutter_native_splash

Or manually in pubspec.yaml:

dependencies:
  flutter_native_splash: ^2.4.7 # check latest version

Step 2: Basic Configuration

flutter_native_splash:
  color: "#42a5f5"
  color_dark: "#042a49"
  image: assets/splash.png
  image_dark: assets/splash-invert.png

What These Mean:

• color → background color (light mode)
• color_dark → background for dark mode (optional)
• image → splash image
• image_dark → splash image for dark mode (optional)

If you don’t support dark mode, you can skip the _dark values.

Step 3: Generate Splash Screen

dart run flutter_native_splash:create

This will:

• Generate native splash screens for Android & iOS
• Place assets in the correct platform directories
• Update the required configuration automatically

Optional: Use a Separate Config File

Instead of cluttering pubspec.yaml, create a file at root:

flutter_native_splash.yaml

Add all config there and run:

dart run flutter_native_splash:create -p flutter_native_splash.yaml

Cleaner and better for scaling.

Advanced Configuration

Platform Control

android: true
ios: true
web: false

Disable platforms you don’t need.

Platform-Specific Colors

color_android: "#42a5f5"
color_dark_android: "#042a49"

color_ios: "#42a5f5"
color_dark_ios: "#042a49"

Background Image Instead of Color

background_image: "assets/background.png"
background_image_dark: "assets/dark-background.png"

⚠️ Important:

You can use either color OR background_image, not both.

Platform-Specific Images

image_android: assets/splash-android.png
image_dark_android: assets/splash-dark-android.png

image_ios: assets/splash-ios.png
image_dark_ios: assets/splash-dark-ios.png

These override the default image.

Branding (Logo at Bottom)

branding: assets/brand.png
branding_dark: assets/brand_dark.png

Position it:

branding_position: bottom
branding_bottom_padding: 24

Options:

• bottom
• bottomRight
• bottomLeft

Fullscreen Mode (Android)

fullscreen: true

Hides the notification bar on Android. (iOS already does this by default)

Android 12+ Special Configuration

Android 12 introduced a new splash system.

Use:

android_12:
  color: "#42a5f5"
  image: assets/images/logo.png
# other tags can be applied here under android_12:

Control Splash Duration

By default:

Splash screen disappears when Flutter draws first frame.

But you can control it manually:

void main() {
  WidgetsBinding widgetsBinding =
      WidgetsFlutterBinding.ensureInitialized();

  FlutterNativeSplash.preserve(
    widgetsBinding: widgetsBinding,
  );

  runApp(const MyApp());
}

Remove it later:

FlutterNativeSplash.remove();

Useful when:

• You load data
• Initialize services
• Check login state

Useful Commands

dart run flutter_native_splash:create
dart run flutter_native_splash:remove

dart run flutter_native_splash:create --path=path/to/file.yaml
dart run flutter_native_splash:create --all-flavors

Recommended Image Sizes

Splash Image (no background)

• 1152×1152
• Center area: 768×768

Splash Image (with background color)

• 960×960
• Center area: 640×640

Branding Image

• 800×320

Flavor Support

If your app has flavors (dev, stg, prod):

Create separate config files:

flutter_native_splash-dev.yaml
flutter_native_splash-stg.yaml
flutter_native_splash-prod.yaml

dart run flutter_native_splash:create --all-flavors

Final Thoughts

Using flutter_native_splash:

• Saves hours of manual setup
• Works across Android & iOS
• Supports dark mode, branding, and flavors
• Keeps your app looking professional from the first frame

If you’re building a production app:

Splash screen is not optional — it’s part of user experience.

I build production-ready Android & Flutter apps — not just tutorials. If you’re working on an app or stuck with one, you can check my work here: www.devminhaj.me