Home / Questions / 562729
Accepted
Lucas Tomic
Asked: 2022-10-18 09:34:49 +0800 CST 2022-10-18 09:34:49 +0800 CST

Why doesn't flutter_native_splash show the image?

  • 772

I am trying to add a Splash Screen to my app with the flutter native splash library .

These are the steps I follow:

0. Delete the files related to the splash screen

On the recommendation of the comments below, I delete them launch_background.xmland run aflutter clean

1. I add the dependency

dependencies:
  flutter:
    sdk: flutter


  ...
  flutter_native_splash: ^2.2.11

2. Design the Splash Screen

flutter_native_splash:
  color: "#FFFFFF"
  image: assets/logo_mdp.png
  android: true
  ios: true

I also tried to do it by creating a file flutter_native_splash.yamlby copying it from the documentation and uncommenting the image line.

  # The image parameter allows you to specify an image used in the splash screen.  It must be a
  # png file and should be sized for 4x pixel density.
  image: assets/logo_mdp.png

3. I create the Splash Screen

flutter pub run flutter_native_splash:create

4. I modify the values-v31/styles.xml Since other packages ask me to use Theme.MaterialComponentsI modify the file it createsstyles.xml

<!-- <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">  BORRADO -->
<style name="NormalTheme" parent="Theme.MaterialComponents">
    <item name="android:windowBackground">?android:colorBackground</item>
</style>

Mistake

However, the splash screen it displays does not draw the image.

When I design the splash screen flutter_native_splash.yaml, the background color changes to the one I indicate. If I design it directly on it, pubspect.yamlit shows a blank screen, no matter what color I tell it. In neither of the two cases does it show the image that I frame.

I tried giving a name of a file that didn't exist when declaring the splash screen to see if the problem was that it didn't find the file but didn't return any error message, but if it returns:

The file "assets/no_existe.png" set as the parameter "image" was not found.

so the error must be something else. launch_background.xml that I have left at the end

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap android:gravity="fill" android:src="@drawable/background"/>
    </item>
    <item>
        <bitmap android:gravity="center" android:src="@drawable/splash"/>
    </item>
</layer-list>

Update I've noticed that it doesn't always go wrong. Sometimes it works other times it doesn't. Also, if I run it with my emulator it always works correctly

flutter

1 Answers

  1. Best Answer

    I was unable to get the package to work properly. Finally I ended up implementing it natively with the following class:

    class SplashScreenService{
    static late WidgetsBinding _widgetsBinding;
    
    //Mantienen el splash screen hasta que se indique lo contrario
    static void preserve(WidgetsBinding widgetsBinding){
        _widgetsBinding = widgetsBinding;   
        _widgetsBinding.deferFirstFrame();
    }

    //Quita el splash screen
    static void remove(){
        _widgetsBinding.allowFirstFrame();
    }
}

    Before implementing it, you have to change the native splash screen in the document launch_background.xml

    Clarification: This implementation only works for android. When I add the implementation for IOS I will update the answer

    • 0