Native Splash Screen in Flutter apps

Photo by CoinView App on Unsplash

When we load our splash screen in our Flutter app, the app takes about a second to initialize the Dart VM and displays a white or empty screen for that time frame.

For solving this issue, we can use a native splash screen for that time frame, and when the flutter VM loads, it displays the splash screen written inside the flutter app.

But does this solves all our problems?

The answer is NO!

There are size gaps in the logo when we load it in the native splash screen as compared to the splash screen on the flutter app.

Because of this, it looks like a glitch.

Let's see how can we solve this.

We would use flutter_native_splash for implementing splash screen from the native side for both android and iOS.

1. Just add flutter_native_splash: latest in your pubsec.yaml and follow the steps given on their official documentation flutter_native_splash
2. In flutter_native_splash.yaml, you can set the color and background image according to your designs and set the image attribute with the path to your logo or splash screen image that you would like to display.
3. Don't forget to add the image path in the assets of pubspec.yaml

By running

flutter pub run flutter_native_splash:create

a few folders and files would be generated automatically. These files would contain the code for displaying the splash screen from the native side.

For Android

1. Goto drawable/launch_background.xml and set the height or width with the exact pixels that you defined in your flutter app for the image. Here always use “ dp ”(Density-independent Pixels) so that it exactly matches the size that we gave the image on the flutter side.
2. Set constraints for width and height and set gravity = fill

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:height="100dp" android:width="300dp" android:gravity="center">
        <bitmap
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="fill"
            android:src="@drawable/splash" />
    </item>
</layer-list>

For iOS

1. Open Xcode
2. Goto ios/Runner/Base.lproj/LaunchScreen.storyboard
3. Select the logo image and set horizontal and vertical constraints for moving the image to the center. Also, set the height and width.

4. Set the content mode to Aspect Fit

Everything would work fine after following these steps without any size issues!