Building Native Splash Screens in Flutter

Fabiyi Ayomiposi

5 min read

·

Sep 30, 2026

--

Listen

Share

Press enter or click to view image in full size

First off, if you want to get straight to business and know how to make it work immediately, the tutorial starts here.

But if you want to get a little behind the scenes, you can just keep reading.

A splash screen is a screen/canvas that shows before your actual app content comes up.
If you’re familiar with Duolingo, you’d know that when you open the app, the first thing you’d see for a while is the owl’s face, and on Instagram, the logo. Those are splash screens.

When you run your Flutter app, the first screen you’ll typically see for about a second is a blank white canvas, and it displays because your app hasn’t fully loaded yet.

Normally, you may want to create your own customised splash screen with Flutter, but don’t be shocked when the first thing you see is still that white canvas and then the splash screen you created coming up about a second later lol.

This happens because the splash screen is to be displayed while your app loads… and Flutter hasn’t loaded yet.
You can’t solve a problem that happens before Flutter starts using Flutter itself.

The solution? A Native Splash Screen.

Now you could go into the deep end of native code by setting up an XML layout file for Android and designing a Launch Screen Storyboard on Xcode for iOS.
But we’re not going to do that; we would be using the flutter_native_splash package instead, and this package would generate the native configurations we need for a native splash screen.

Setting Up The flutter_native_splash Package

Step 1: Install the Package

Open your terminal at the root of your project and run this command. This will add the package to your pubspec.yaml file and install it:

flutter pub add flutter_native_splash

Step 2: Configure the Splash Screen

Now it’s time to tell the package what to actually build. You can do this directly inside your pubspec.yaml file, but things can get pretty messy in there.
So instead, let's create a clean, dedicated file in your root project folder named native_splash.yaml and paste the configuration below(Feel free to tweak it).

flutter_native_splash:
  android: true
  ios: true
  web: false

  color: "#ffffff" # Your splash screen background hex color
  image: "assets/splash_logo.png" # must be a PNG file

By default, the package generates splash screens for Android, iOS and web, so the platform parameters give you control over which platforms you want to generate for.

There is also an optional branding parameter to which you’ll pass a PNG file. This would be at the bottom centre of the screen by default.

And if a plain colour isn't enough for your design, you can use background_image in place of color for more creative freedom.

Platform-Specific Configurations and Theming

The flutter_native_splash package also allows you to configure the splash screens based on the device’s theme. So if you want a different image or colour for light and dark modes, you would have something like this

flutter_native_splash:
# for light mode
  color: "#fffbf8"
  image: "assets/images/logo.png"

# for dark mode  
  color_dark: "#111111"
  image_dark: "assets/images/dark_logo.png"

And if you want to have different configurations for different platforms, it would be in this format

flutter_native_splash:
  image_android: "assets/images/logo.png"
  image_dark_android: "assets/images/dark_logo.png"

  branding_ios: "assets/images/brand_ios.png"
  branding_dark_ios: "assets/images/dark_brand_ios.png"

Keep in mind that platform-specific configurations override their corresponding general configuration.

Configuring for Android 12+

Now you might be wondering, “Why do Android 12+ need their own configurations?”
Well, that is because they are special people.

Starting with Android 12, a new splash screen system was introduced. This means that the splash screen is handled differently from previous Android versions, and you no longer have as much freedom over how it is displayed.

But don’t worryyyyy, since we’re using this package, you don’t need to break into much of a sweat.

To account for this, we just give Android 12 its own nested block in our file, as shown below

flutter_native_splash:
  android: true
  ios: true
  web: false

  color: "#fffbf8"
...

  android_12:
    color: "#fffbf8"
    # if an image is not specified, the app's launcher icon is used by default
    image: "assets/images/logo_android12.png"
    color_dark: "#111111"
    # optional, useful if your logo needs to sit inside a solid, colored badge/background
    icon_background_color: "#111111"

With the new splash screen system, Android treats your image as an icon and clips it into a circle. So you have to make sure that the most important elements of your image/logo fit into the constraints.

If you have an image/logo without a background, your image should be 1152×1152 px and fit into a circle 768px in diameter
If it does have a background, your image should be 960×960 px and fit into a circle 640px in diameter.

Now the icon can look tiny, so you may want to fill as much space as possible within the circle constraint.
Also worth noting that you can’t set a background_image for Android 12 and later.

Splash!

Now that you have all these set up, the next thing you do is to run the package’s generation command below

dart run flutter_native_splash:create -p native_splash.yaml

If you placed your configurations in pubspec.yaml, run

dart run flutter_native_splash:create

This will generate the native resources and configuration required by the platforms you enabled to display that splash screen before Flutter renders its first frame.
And whenever you make any changes to your configurations, you have to run this command again to update accordingly.

If you stop your app and run it now, you should be able to see the splash screen you just created rather than the white canvas.

For iOS, you may encounter an issue where you still briefly see the previous splash screen. This is due to iOS aggressively caching splash screens at a system level.
To fix it, you may have to completely delete the app from your simulator, restart it and run the app again for the changes to reflect.

If all went well, you just created a native splash screen in Flutter!
Yayyy, plays fanfare 🎉

If this helped you, please leave a clap or claps, whichever you want 😂
And you can leave a comment too.

Peace. 🫶