How to create a native splash screen in flutter

A splash screen is a screen that loads up when you first launch an app otherwise also has a loading screen. Why is a splash screen needed in an app apart from the fact that it makes an app look more aesthetic it also makes your app look faster when it’s been launched. To create a native splash screen might look a little tedious but there is an easy way to go about this.

First, we have to add the package “flutter_native_splash” to our project You can simply achieve this by adding this command in your project terminal “flutter pub add flutter_native_splash” You can read more on the package on flutter_native_splash let me show you how you can easily implement it.

After the installation of the package in that same pubspec.yaml right under the dev_dependencies create a new argument called flutter_native_splash under this argument you will define the color and the image/logo of your app.

flutter_native_splash:
  color: "#f7f6f1"
  color_dark: "#272727" //if your app as a dark mode
  image: assets/images/burger.png
  image_dark: assets/images/burger.png //if your app as a dark mode

Then for Andriod 12 devices it has a special argument that has to be defined separately it will take an argument under the flutter_native_splash.

flutter_native_splash:
  color: "#f7f6f1"
  color_dark: "#272727"
  image: assets/images/burger.png
  image_dark: assets/images/burger.png

  andriod_12:
    icon_background_color: "#f7f6f1"
    icon_background_color_dark: "#272727" //if your app as a dark mode
    image: assets/images/burger.png
    image_dark: assets/images/burger.png //if your app as a dark mode

After this little configuration, you are almost done There is just one last thing to do you have to add this command to your terminal to complete the setup “dart run flutter_native_splash:create”.