Setup fullscreen native splash in flutter using flutter_native_splash plugin.
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.