This blog is about a solution to a simple problem, which is how to show a full screen native splash screen in flutter without an issues in both Android and IOS for all os versions. You can see how the splash will look in the below video clip.

---

Step : 1

Install the flutter_native_splash latest plugin version in your app pubspec.yaml file.

flutter_native_splash: ^2.4.0

---

Step : 2

Create a configuration file for flutter_native_splash in your lib folder. Something like this lib/native_splash.yaml

flutter_native_splash:
  background_image: "assets/images/splash_screen.png"
  android_12:
  web: false
  android_gravity: fill
  fullscreen: true

---

Step : 3

Add the splash image on the assets/images/splash_screen.png and then uncomment the assets section in your pubspec.yaml

We are using a file size of 1190px width by 2575px height. The file size can be confusing while using the package, but we have tested this file size in different devices and this size works the best for both android and ios devices. If any changes comes in the file size we will update this blog to show correct that value.

flutter:

  uses-material-design: true

  assets:
    - assets/images/

---

Step : 4

Now run the below command so that the plugin can change the configuration in your android and ios folders.

dart run flutter_native_splash:create --path=lib/native_splash.yaml

---

Step 5:

One last step is to remove the native splash screen after the app has been run. Add the FlutterNativeSplash.remove(); line below runApp() function to remove the splash. This is a important code, so make sure it is in correct place.

  runApp(const MyApp());
  FlutterNativeSplash.remove();

---

Step 6:

We are done with the configuration and setup, you can run the application and test it in your android and ios devices. Comment below if you have any issues.

---