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

skystar7 · 2020-02-09T01:20:06Z

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 · 2020-02-14T09:47:59Z

same here, in android and ios

yunseo-h68 · 2020-02-15T10:05:43Z

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 · 2020-02-20T18:22:15Z

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 · 2020-02-20T20:25:33Z

Thank you very much @edufolly

camillo777 · 2020-02-21T16:39:36Z

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 · 2020-02-29T21:00:05Z

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">
        
        <item name="android:windowBackground">@drawable/launch_background</item>
        
    </style>
    
    <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 · 2020-03-04T23:37:53Z

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 · 2020-03-05T02:25:32Z

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 · 2020-03-05T02:29:48Z

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 · 2020-03-05T02:54:18Z

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 · 2020-03-05T03:02:00Z

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 · 2020-03-05T03:08:01Z

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 · 2020-03-05T15:12:11Z

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 · 2020-04-23T00:47:52Z

I have the same issue on ios

zois · 2020-04-30T10:49:37Z

same issue on iOS also

JayDev43 · 2020-06-26T09:03:13Z

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 · 2020-07-07T00:09:17Z

@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 · 2020-09-08T16:58:53Z

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 · 2020-09-08T23:24:50Z

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.

…he right style (LaunchTheme) in styles.xml. This should resolve #39, #54, #67, #92, #112, and #117. Removed code that modifies MainActivity as it is not longer needed since Flutter embedding V2 uses two styles in styles.xml so full screen is set independently in the style.

jonbhanson · 2021-01-12T15:43:09Z

Should be resolved by 4898182.

sartorinahuel · 2023-08-30T17:34:48Z

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

loic-hamdi mentioned this issue Oct 1, 2020

Black screen between the splash screen & the app on iOS #94

Closed

jonbhanson closed this as completed Jan 12, 2021

akshatjain-beam mentioned this issue May 16, 2023

Android에서 앱에 Lifecycle 변경이 발생했을 때, 지도가 네비게이터 스택을 무시하고 최상단에 노출되는 문제 note11g/flutter_naver_map#56

Closed

rickylaw-dh mentioned this issue Dec 26, 2023

i have a driving app that use google_maps and mapbox navigation as a navigation map but my app crash when the mapbox navigation is called 3 times eopeter/flutter_mapbox_navigation#269

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

skystar7 commented Feb 9, 2020 •

edited

Loading

NarHakobyan commented Feb 14, 2020 •

edited

Loading

yunseo-h68 commented Feb 15, 2020 •

edited

Loading

edufolly commented Feb 20, 2020

yangfanyu commented Feb 20, 2020

camillo777 commented Feb 21, 2020

tiramisuuuu commented Feb 29, 2020 •

edited

Loading

PramodJoshi commented Mar 4, 2020 •

edited

Loading

lance-auror commented Mar 5, 2020

EArminjon commented Mar 5, 2020

lance-auror commented Mar 5, 2020

EArminjon commented Mar 5, 2020

lance-auror commented Mar 5, 2020

PramodJoshi commented Mar 5, 2020 •

edited

Loading

kimmy-wang commented Apr 23, 2020

zois commented Apr 30, 2020

JayDev43 commented Jun 26, 2020

TJMusiitwa commented Jul 7, 2020

DanielCardona commented Sep 8, 2020

mchurichi commented Sep 8, 2020

jonbhanson commented Jan 12, 2021

sartorinahuel commented Aug 30, 2023

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

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

Comments

skystar7 commented Feb 9, 2020 • edited Loading

NarHakobyan commented Feb 14, 2020 • edited Loading

yunseo-h68 commented Feb 15, 2020 • edited Loading

edufolly commented Feb 20, 2020

yangfanyu commented Feb 20, 2020

camillo777 commented Feb 21, 2020

tiramisuuuu commented Feb 29, 2020 • edited Loading

PramodJoshi commented Mar 4, 2020 • edited Loading

lance-auror commented Mar 5, 2020

EArminjon commented Mar 5, 2020

lance-auror commented Mar 5, 2020

EArminjon commented Mar 5, 2020

lance-auror commented Mar 5, 2020

PramodJoshi commented Mar 5, 2020 • edited Loading

kimmy-wang commented Apr 23, 2020

zois commented Apr 30, 2020

JayDev43 commented Jun 26, 2020

TJMusiitwa commented Jul 7, 2020

DanielCardona commented Sep 8, 2020

mchurichi commented Sep 8, 2020

jonbhanson commented Jan 12, 2021

sartorinahuel commented Aug 30, 2023

skystar7 commented Feb 9, 2020 •

edited

Loading

NarHakobyan commented Feb 14, 2020 •

edited

Loading

yunseo-h68 commented Feb 15, 2020 •

edited

Loading

tiramisuuuu commented Feb 29, 2020 •

edited

Loading

PramodJoshi commented Mar 4, 2020 •

edited

Loading

PramodJoshi commented Mar 5, 2020 •

edited

Loading