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.

스크린샷 2022-03-16 오후 11.21.43.png

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.

blogcoffee-2 (2).png