One of the thing that I experienced while building flutter application is a white blank screen that appears when an application starts. To me is very annoying and I do known that it does not bring good user experience. This can be frustrating for users and can make your app feel unprofessional.
But the good news is that you can remove the blank white screen and display an image or logo just like other apps that we use in our daily activities.
In this article we will be using a package known flutter_native_splash to display a custom splash screen when our apps starts.
What is a Splash Screen?
A splash screen in mobile applications is a graphical element that appears when you launch the app. It is usually displayed for a short period, typically a few seconds, while the app is loading its core components and initialising necessary resources in the background. Splash screens serve as an initial branding or introductory screen for the app, providing a smooth and visually appealing transition from the app launch to the main user interface.
Add flutter_native_splash package in our project
Add flutter_native_splash as dependency to your Flutter project.
You can do this by adding the following line in pubspec.yaml
dependencies:
flutter_native_splash: ^2.3.1
And then run flutter pub get
Setting up Splash Screen
First thing is to add an image that we want it to appear in our splash screen, this can be a logo or any image.
Also do not forget to add the following line is your pubspec.yaml
file.
flutter:
assets:
- assets/
This will tell Flutter where it can find our images
Now let's start the coolest part
You need to configure flutter_native_splash to use the image for the splash screen.
Inside you're pubspec.yaml
add flutter_native_splash with following configuration
flutter_native_splash:
# Background color of splash screen
color: "#ffffff"
# Image that you want to show
image: assets/splash.png
# Sizing of image
fill: true
# Splash Image to show in dark mode (Optional)
image_dark: assets/splash_dark.png
# Background color of dark mode (Optional)
color_dark: "#000000"
Also make sure you do not add this configs under flutter section.
But wait!!! one more step.
Run the following command so that flutter_native_splash package can do it's magic 🪄
flutter pub run flutter_native_splash:create
And that's it, now your user will have an amazing experience when they click your app 🥳.
Top comments (0)