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.
STEP 2
in your pubspec.yaml file, go to the dev dependecies and add
dependencies:
flutter_native_splash: ^2.2.17
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
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
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
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)