Flutter : Splash Screen

One of the first questions when starting a new project in Flutter is: How do we create a Splash screen?

If you’re wondering what is the Splash Screen? It is the initial screen that is displayed when you open the application.

There are many uses that can be given to the initial screen.

Case 1

In most cases we simply use it to show our brand while the application finishes opening, otherwise, when opening the application it would show a black or white screen which makes our app a little weird.

Case 2

In other cases, some applications create a Splash Screen for the purpose of performing some task, such as data download, synchronization, etc.

Case 3

Finally other apps create a forced Splash Screen, when I say forced I mean they don’t use it for the purpose of showing something while the application finishes loading, but they force the initial screen duration for a few seconds.

Something very important to consider is the user experience, imagine opening your favorite application and wait for 3 seconds each time until the initial screen disappears, it isn’t very good, is it?

In Flutter we can create a Splash screen using Dart, but if we do this we would be implementing Case 3 that I mentioned earlier, which doesn’t seem like a good option.

I will show you how to implement Case 1, for this case we need some basic knowledge of Android and iOS, since the Splash Screen will be based on each platform.
We are going to show an image in the center of the screen with a red background.

For this example I chose this image

mario_head.png

Android

Step 1

Copy our selected image to the drawable folder that is inside the android folder.

Step 2

Modify the styles.xml file inside the values ​​folder and add the following:

Within the LaunchTheme style tag (which is the one that uses the main activity, you can see it in the AndroidManifest.xml), we add the full screen property.

<item name= "android:windowFullscreen">true</item>

I also added a color in this file, but it does not have to be inside styles.xml, you can also create your own configuration file and put your colors.

<color name="red">#FF0000</color>

Complete file styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:windowFullscreen">true</item> 
    </style>
    <color name="red">#FF0000</color>
</resources>

Step 3

We modified the file launch_background.xml that is inside the drawable folder.
Inside the layer-list tag, we modify the color of the item that contains the drawable, in this case we use the color that we previously created:

<item android: drawable= "@color/red" />

And we create a new item that contains a bitmap with the image that we add, in the following way:

<item>
 <bitmap
 android:gravity= "center"
 android:src= "@drawable/mario_head" />
 </item>

Complete file : launch_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/red" />
     <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/mario_head" />
    </item>
</layer-list>

Step 4

Because we are using the full screen flag at the beginning, the ideal is to remove it after our application finishes loading, for that we will modify the MainActivity.java file and it would be as follows;

public class MainActivity extends FlutterActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //make transparent status bar
    getWindow().setStatusBarColor(0x00000000);
    GeneratedPluginRegistrant.registerWith(this); 
    //Remove full screen flag after load
    ViewTreeObserver vto = getFlutterView().getViewTreeObserver();
    vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
      @Override
      public void onGlobalLayout() {
        getFlutterView().getViewTreeObserver().removeOnGlobalLayoutListener(this);
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
      }
    });
  }
}

Do not forget the new imports:

import android.view.ViewTreeObserver;
import android.view.WindowManager;

Android ready!

iOS

Step 1

Open the file Runner.xcworkspace using XCode that is inside the folder of ios, Find the file Assets.xassets and drag our image towards that file.
It should look like the next image.

Step 2

Modify the file LaunchScreen.storyboard according to our needs, in this case I put a red background and an ImageView in the center with the image of our character.

Step 3

Modify the Info.plist file and add a new Item:

Status bar is initially hidden = true

Step 4

Due to the previous flag, our application will start without status bar, so we have to show it again.
Modify the AppDelegate.m file, and add this line inside our didFinishLaunchingWithOptions method to show the status bar again:

UIApplication.sharedApplication.statusBarHidden = false;

iOS ready

Final result

Splash screen

Conclusion

As you can see, a basic knowledge of Android and iOS was necessary to make certain configurations like the one I showed you, also for changing the name of the application and the main icon among others, and in more advanced cases, for the creation of Plugins.

You can check the source code in my flutter-samples repo https://github.com/diegoveloper/flutter-samples

References:

https://flutter.io/assets-and-images/#updating-the-launch-screen