How to use the flutter native splash package

flutter native splash

In this article, we will learn how can we use the flutter native splash package in our flutter project. By using this package we can customize our flutter app native splash screen. We can add the logo of the app, and set the background color of the native splash screen, set the dark theme logo, and background color on the native splash screen.

Let’s start the work:

first, go to the pub.dev, Search the package flutter_native_splash and then install it into your flutter project under the pubspec.yaml file and under the dependencies set this. Like

flutter native splash
flutter native splash

You can read the complete setting of the splash screen by using this package.

Then go to the dev_dependencies and declare it and also you need to do some steps in the main. dart file. In the main. dart file under the main function we initialize this package, this means flutter native splash in implemented in the project. But now we need to configure it.

flutter native splash

If you run the application with without configure you will see only the white screen after run ther flutter project.

Without configuring the splash screen you run the application and now you see only the white screen, to fix this you need to initialize the init function and inside it, you need to remove the flutter native splash screen, or you can add a little delay to remove this flutter native splash screen.

So how you can do this? let me show you

flutter native splash

So, now we see how can we configure the splash screen background color and as well as how can we add a logo of our application on the splash screen. For this, you need to go inside pubspec. YAML file and under the dev_depencies you need to initialize this package and its attributes.

There are many attributes of it, but we will use only those that we require or according to our requirements.

flutter native splash

These are the attributes of the flutter native splash package, when we initialize it under the dev_dependencies, I am using only two attributes color and image, you can use the other ones as well according to your requirements.

flutter native splash

After adding your settings, run the following command in the terminal:

flutter pub run flutter_native_splash:create

After running this command in the terminal when you will run your project then you will see an output like this:

So, in this way, we can use the flutter native splash package inside the flutter project and we can customize the things to our requirements.

Read Articles:

How to make a flutter counter app with the provider?

How to make Flutter Counter App with GetX

How to make Flutter Counter App with setState

How to change app name in Flutter – The Perfect way in 2022

How to make a custom Gradient Button in Flutter

Share