How to create/remove/change the splash image in flutter

flutter_native_splash is a plugin that makes splash images quick and easy.

If you are not using it, I recommend using it.

https://pub.dev/packages/flutter_native_splash

How to install and configure plugins

The plugin is installed through the command below.

flutter pub add flutter_native_splash --dev

After installation, write the following at the bottom of the pubspec.yaml file.

flutter_native_splash:
  color: "#FFFFFF"
  image: assets/splash.png
  fullscreen: true

In addition, there are several other settings. If necessary, you can use it appropriately.

color: // the background color of the splash screen
background_image: // the background image of the splash screen
image: // the image of the splash screen
color_dark: // the background color when device setting is dark mode
background_image_dark: // the background image when device setting is dark mode
image_dark: // splash screen image when device setting is dark mode
android_gravity: // set the position of the splash image on Android. (bottom, center, center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal, fill_vertical, left, right, start, top)
ios_content_mode: // set the position of the splash image on iOS. (scaleToFill, scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight)
web_image_mode: // set the position of the splash image on the web. (center, contain, stretch, cover)
fullscreen: // whether to display the splash screen in full screen (true, false)

Create the splash Image

After all the settings are complete, I will create a splash image.

The splash image can be created easily by using the command below.

flutter pub run flutter_native_splash:create

If creation is successfully completed, you can see the following message.

Remove the splash Image

If you want to remove the splash image, use the command below.

flutter pub run flutter_native_splash:remove

Change the splash Image

If you want to change the splash image, remove it first and then create a new one.