Review: flutter_native_splash. All you need to create a splash screen in Flutter

Introduction

In the previous review, we’ve created an application icon. If you are not comfortable with the ugly white screen that appears for a while when the application loads (the so-called native splash screen) there is a simple solution to help you get rid of it for good. The procedure is quite simple, and you can see it here (the video corresponds to this text content below).

Prerequisites

Before we begin with screen generation for both platforms, we will need to prepare an image that the package will process. In any case, when exporting from a graphical editor, this should be:

• PNG bitmap,
• about 200x200 pixels in size,
• in the sRGB color profile,
• without interlacing,
• select anti-aliasing, scaling according to the input data or image content,
• Leave the PPI equal to 72, the image will be rescaled, based on the PPI (DPI in the case of Android) of the device.
• There is full support for 32-bit color depth (i.e. with transparency).

Package installation and commissioning:

We will use a package called flutter_native_splash

flutter_native_splash | Dart Package

Copy the PNG file (which you can name, for example, splash.png) to the folder of your Flutter project, for example, in the “assets” folder (which is usually used for project files), create the “splash_screen” folder and place the file there.

In your IDE or text editor open the file called:

pubspec.yaml

which is located in the root directory of your Flutter project. Add the following code:

dev_dependencies:
  flutter_native_splash:

A few notes: I leave flutter_native_splash unversioned (I want to keep the package up-to-date, the project itself is not covered by the package, so there is you do not risk the functionality of your project). The pubspec.yaml file itself is very sensitive to the spacebar (not tab) hierarchy, so insert and edit parameters very carefully.

In the terminal, from the project root folder run:

flutter pub get

or just simply save the changes (for example, in Visual Studio Code).

Create a flutter_native_splash.yaml file next to pubspec.yaml, i.e. in the root directory and paste the following code into it:

flutter_native_splash:
  image: assets/splash_screen/splash.png
  color: “42a5f5”
  android_disable_fullscreen: true

So there is a path to the PNG file (you can skip it if you only need a colored splash screen), the color of the screen in hexadecimal RGB format (it can also have a sharp symbol, “#42a5f5”). Also, the following parameters of the logical boolean type are available:

• ios / android: false, prohibiting the creation of a screensaver for a particular platform,
• fill: the image is filled to the maximum possible size according to the screen (this option does not work in iOS),
• android_disable_fullscreen: disable full-screen splash on Android

Generate the screen with this command in the terminal:

dart run flutter_native_splash:create

Check the appearance with the last command:

flutter run

Notes

If your iOS screen does not work, run the command

flutter clean

and create a screen again.

Conclusion

Personally, I think this package is the easiest way to create a splash screen. With a minimal effort to enter parameters, everything else will be processed by the package. If you were happy with flutter_launcher_icons, this is the perfect solution because. it is heavily inspired by this package.

Previous review: flutter_launcher_icons. Everything you need to create an application icon in Flutter