DEV Community

Cover image for Make Creating Your flutter application splash Screen Stand Out by removing the custom white splash .
 Murshid
Murshid

Posted on

Make Creating Your flutter application splash Screen Stand Out by removing the custom white splash .

Introduction

Upon launching the app, the first display you see is the splash screen, which sets the tone for user experience. Flutter's white splash screen can hinder this experience. The splash displays important information such as the company logo and name, serving as a welcome screen for the app. Additionally, it informs users of loading delays caused by network issues or errors.

In this tutorial, we are going to learn how get rid of the ugly splash screen and display a splash screen when your flutter application launches .

Prerequisites

we will need to prepare an image that will be used as the splash image .

  • PNG bitmap,
  • any IDE eg visual studio code ,

STEP 1

Go to Pub.dev to get the latest flutter_native splash_package.

Image description

STEP 2

in your pubspec.yaml file, go to the dev dependecies and add

dependencies:
  flutter_native_splash: ^2.2.17
Enter fullscreen mode Exit fullscreen mode

STEP 3

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

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

STEP 4

After adding settings run the code below in your terminal and add the path to your flutter_native _splash.

flutter pub run flutter_native_splash:create --path=path/to/my/file.yaml
Enter fullscreen mode Exit fullscreen mode

Note: Every time you do a change to this, run pub get and splash create command.

now you can see the default white splash is removed !

Alternatively , the solid background color can be changed to a background image .

flutter_native_splash:
  background_image: assets/images/backgroundimage.gif
  image: assets/images/splashimage.png
  # color: "#ffffff"
  android_disable_fullscreen: true
Enter fullscreen mode Exit fullscreen mode

Note: you can't use both background color and background image at the same time you can only use either at once .

Conclusion
Thanks to the flutter_native_splash plugin, adding a splash screen to your app doesn't have to be difficult.

Top comments (0)