Flutter Native Splash Screen image not appearing - Flutter (Dart)

Question

I added Flutter Native Splash screen to my dependencies. The color appears with no problem but the image is not appearing and I don't know why.

Pubspec.yaml:

  #flutter native splash
  flutter_native_splash: ^2.2.19

flutter_native_splash:
  image: assets\RoderLogoo.png
  color: "#2A52BE"

  android: true
  ios: true
  web: true

flutter:
  assets:
    - assets/

The image does exist, I've tried using every possible size of the image possible, the size I am using right now is 192x162 The image is transparent but I don't think that has to do with anything. the path is correct (the file where I store all my photos is assets. Any ideas?

Answer 1

As in your question, can find problem.

As first for flutter_native_splash you used wrong slag. Actually must use forward slag like in the comment that @Shivam Jamaiwar said.

flutter_native_splash:
  image: assets/RoderLogoo.png
  color: "#2A52BE"

As second you should use specific image file name rather than directory name in yaml file. Like that. Because sometime image without specific name can't load from assets file.

flutter:
  assets:
    - assets/RoderLogoo.png

Edit: Procedure to add and fix

1. Create specific yaml file with the name of flutter_native_splash.yaml in the root directory and copy&paste code from documentation.
2. Create assets folder and add your image to that directory.
3. In the flutter_native_splash.yaml file you need to setting up to appear your image on native splash screen. But as documentation “Only one parameter can be used, color and background_image cannot both be set.” So add setting for image like that background_image: "assets/splash_image.jpg".
4. And run flutter pub run flutter_native_splash:create and flutter pub run flutter_native_splash:create --flutter_native_splash.yaml.
5. Then run your project again. That will fine for you and not anything to do other. But you need to add some setting for Android 12 and other platform beside the android.

Answer 2

when writing image path use forward slash / not backward slash \

flutter_native_splash:

  image: "assets/RoderLogoo.png"

  color: "#2A52BE"

  android: true

  ios: true

then you need to run three commands after saving your yaml file

run following commands:

1. flutter clean
2. flutter pub get
3. flutter pub run flutter_native_splash:create