search

jonbhanson / flutter_native_splash

Automatically generates native code for adding splash screens in Android and iOS. Customize with specific platform, background color and splash image.
https://pub.dev/packages/flutter_native_splash
MIT License
1.29k stars 202 forks source link

Black screen that shows up between the splash screen and my app's first screen #54

Closed skystar7 closed 3 years ago

skystar7 commented 4 years ago

Config used: Tested with Android Device

dev_dependencies: flutter_native_splash: ^0.1.9

flutter_native_splash: image: assets/icon/...-splash.png color: "#ffffff"

NarHakobyan commented 4 years ago

same here, in android and ios

yunseo-h68 commented 4 years ago

I don't know for iOS but for Android, delete <item name="android:windowFullscreen">true</item>. Then the status bar will be shown, but the black screen will disappear. 

<!--android/app/src/main/res/values/styles.xml-->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
        <!-- delete this line. <item name="android:windowFullscreen">true</item>--> 
    </style>
</resources>
edufolly commented 4 years ago

Probably you are using V2 of Flutter's Android embedding in MainActivity. You need to update the AndroidManifest.xml to the new configurations.

<meta-data
    android:name="io.flutter.embedding.android.NormalTheme"
    android:resource="@style/NormalTheme" />

<meta-data
    android:name="io.flutter.embedding.android.SplashScreenDrawable"
    android:resource="@drawable/launch_background"/>

and remove old meta-data.

<meta-data
    android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
    android:value="true"/>

You need to update styles.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <!--
        <item name="android:windowFullscreen">true</item> -->
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.

         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

For me, the problem was shown in another way. I can't select a text field on the bottom of the page, because the keyboard hide the field. Different problems but the same answer.

yangfanyu commented 4 years ago

Thank you very much @edufolly

camillo777 commented 4 years ago

Probably you are using V2 of Flutter's Android embedding in MainActivity. You need to update the AndroidManifest.xml to the new configurations.

<meta-data
    android:name="io.flutter.embedding.android.NormalTheme"
    android:resource="@style/NormalTheme" />

<meta-data
    android:name="io.flutter.embedding.android.SplashScreenDrawable"
    android:resource="@drawable/launch_background"/>

and remove old meta-data.

<meta-data
    android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
    android:value="true"/>

You need to update styles.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <!--
        <item name="android:windowFullscreen">true</item> -->
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.

         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

For me, the problem was shown in another way. I can't select a text field on the bottom of the page, because the keyboard hide the field. Different problems but the same answer.

Hello, I have searched but I do not have those lines in my AndroidManifest.xml files (debug, profile, main). They were supposed to be created by FlutterNativeSplash package?

I just have this metadata line: <meta-data android:name="flutterEmbedding" android:value="2" />

tiramisuuuu commented 4 years ago

Probably you are using V2 of Flutter's Android embedding in MainActivity. You need to update the AndroidManifest.xml to the new configurations.

<meta-data
    android:name="io.flutter.embedding.android.NormalTheme"
    android:resource="@style/NormalTheme" />

<meta-data
    android:name="io.flutter.embedding.android.SplashScreenDrawable"
    android:resource="@drawable/launch_background"/>

and remove old meta-data.

<meta-data
    android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
    android:value="true"/>

You need to update styles.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <!--
        <item name="android:windowFullscreen">true</item> -->
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.

         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

For me, the problem was shown in another way. I can't select a text field on the bottom of the page, because the keyboard hide the field. Different problems but the same answer.

Hello, I have searched but I do not have those lines in my AndroidManifest.xml files (debug, profile, main). They were supposed to be created by FlutterNativeSplash package?

I just have this metadata line: <meta-data android:name="flutterEmbedding" android:value="2" />

@camillo777 I also did not have the "old meta-data", but it still worked for me. Did you try adding the meta data inside <activity ... </activity> in your AndroidManifest.xml file?

PramodJoshi commented 4 years ago

Any update on this? Really hoping to get an update from dev on this. Solution from @yunseo-h68 and @edufolly works but the splash screen jerks.

lance-auror commented 4 years ago

What worked for me to prevent the jumping was to add the following to the AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.app">

    <application android:name="io.flutter.app.FlutterApplication" android:label="Example" android:icon="@mipmap/ic_launcher">
        <activity android:name=".MainActivity" android:launchMode="singleTop" android:theme="@style/LaunchTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>

<!-- THIS ONE HERE INSIDE THE MAIN ACTIVITY STOPPED THE JUMPING -->
            <meta-data
                android:name="io.flutter.embedding.android.SplashScreenDrawable"
                android:resource="@drawable/launch_background"/>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data android:name="flutterEmbedding" android:value="2" />
    </application>
</manifest>

I did not have to change the styles.xml from the default:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>
EArminjon commented 4 years ago

What worked for me to prevent the jumping was to add the following to the AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.app">

    <application android:name="io.flutter.app.FlutterApplication" android:label="Example" android:icon="@mipmap/ic_launcher">
        <activity android:name=".MainActivity" android:launchMode="singleTop" android:theme="@style/LaunchTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>

<!-- THIS ONE HERE INSIDE THE MAIN ACTIVITY STOPPED THE JUMPING -->
            <meta-data
                android:name="io.flutter.embedding.android.SplashScreenDrawable"
                android:resource="@drawable/launch_background"/>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data android:name="flutterEmbedding" android:value="2" />
    </application>
</manifest>

I did not have to change the styles.xml from the default:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

It work for me :) !!!!. One last thing, during launching process, the status bar passe from black, to grey, to black again...

lance-auror commented 4 years ago

It work for me :) !!!!. One last thing, during launching process, the status bar passe from black, to grey, to black again...

Looked into this and it is because the style's parent is @android:style/Theme.Black.NoTitleBar when I changed this to @android:style/Theme.Translucent.NoTitleBar it keeps the background color. I am on API 28 so not sure if this is the solution in all cases

EArminjon commented 4 years ago

It work for me :) !!!!. One last thing, during launching process, the status bar passe from black, to grey, to black again...

Looked into this and it is because the style's parent is @android:style/Theme.Black.NoTitleBar when I changed this to @android:style/Theme.Translucent.NoTitleBar it keeps the background color. I am on API 28 so not sure if this is the solution in all cases

Thanks, your solution give me possibility to remove the first status bar color. Instead of having : "Black, Translucent, Black" i got "Translucent, Translucent, Black"

I would removing the second one to have a full Black status bar :) ! The third one is done in the flutter part.

lance-auror commented 4 years ago

The third one is done in the flutter part.

From what I understand is that is in flutter but it uses the system color / device specific. If I use Blue as the primary color in flutter then a slightly darker blue appears there. On a different device it may appear as black.

PramodJoshi commented 4 years ago

What worked for me to prevent the jumping was to add the following to the AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.app">

    <application android:name="io.flutter.app.FlutterApplication" android:label="Example" android:icon="@mipmap/ic_launcher">
        <activity android:name=".MainActivity" android:launchMode="singleTop" android:theme="@style/LaunchTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>

<!-- THIS ONE HERE INSIDE THE MAIN ACTIVITY STOPPED THE JUMPING -->
            <meta-data
                android:name="io.flutter.embedding.android.SplashScreenDrawable"
                android:resource="@drawable/launch_background"/>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data android:name="flutterEmbedding" android:value="2" />
    </application>
</manifest>

I did not have to change the styles.xml from the default:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

@lance-auror That worked flawlessly! Thank you so much. Great work!

Note: I didn't experience the 'status bar color change' issue that @EArminjon is experiencing. Flutter version: v1.12.13+hotfix.8 Android targetSDK: 29

kimmy-wang commented 4 years ago

I have the same issue on ios

zois commented 4 years ago

same issue on iOS also

JayDev43 commented 3 years ago

It work for me :) !!!!. One last thing, during launching process, the status bar passe from black, to grey, to black again...

Looked into this and it is because the style's parent is @android:style/Theme.Black.NoTitleBar when I changed this to @android:style/Theme.Translucent.NoTitleBar it keeps the background color. I am on API 28 so not sure if this is the solution in all cases

Just a note that for me, when making the change to translucent both on a real device and on a Pixel 2 API R Emulator, this seems to cause a lag after pressing the launch icon. The launch icon visibly changes to show its recognised the gesture input but then nothing would happen for about 1-2 seconds and then the splash screen loads.

TJMusiitwa commented 3 years ago

@edufolly with regards to your statement

For me, the problem was shown in another way. I can't select a text field on the bottom of the page, because the keyboard hide the field. Different problems but the same answer.

Did you find any solution because even despite using SingleChildScrollView which is meant to bring a textfield into view and away from the keyboard, this package still causes this issue

DanielCardona commented 3 years ago

In my case (on Android only, on IOS is ok), the png image I use as a home screen shows the pubspec.yaml defined colors first, but before It finish loading the png is still visible but the background turns black ... any solution? it's really ugly and I can't find any solution ...

Thanks, I hope it gets fixed because I love the simplicity of this package ☺️

mchurichi commented 3 years ago

It work for me :) !!!!. One last thing, during launching process, the status bar passe from black, to grey, to black again...

Looked into this and it is because the style's parent is @android:style/Theme.Black.NoTitleBar when I changed this to @android:style/Theme.Translucent.NoTitleBar it keeps the background color. I am on API 28 so not sure if this is the solution in all cases

Just a note that for me, when making the change to translucent both on a real device and on a Pixel 2 API R Emulator, this seems to cause a lag after pressing the launch icon. The launch icon visibly changes to show its recognised the gesture input but then nothing would happen for about 1-2 seconds and then the splash screen loads.

Had the same issue with the Translucent theme, but that delay caused the splash screen to not show up at all when running on release mode, while on debug mode worked just fine. Reverting to the Black theme fixed the issue.

jonbhanson commented 3 years ago

Should be resolved by 48981828e831768c4ad89a35475e8f9f24e0aca5.

sartorinahuel commented 9 months ago

The solution for me was to change the background color. #000000 to #080808 and it worked