Flutter app on start it is showing white screen for few second

Question

Why does my Flutter app show a white screen for few seconds on start? How do I solve this issue?

It is flutters default splashscreen See https://stackoverflow.com/a/48101776/4712391 — Tinus Jackson, May 16 '19 at 12:43
Does this answer your question? [Adding a splash screen to Flutter apps](https://stackoverflow.com/questions/43879103/adding-a-splash-screen-to-flutter-apps) — Shady Mohamed Sherif, Jan 01 '20 at 12:03
If ever there is a black screen or white screen or launch screen dismissed too quickly in iOS using Flutter framework try to use the step mentioned in the https://github.com/flutter/flutter/issues/36365#issuecomment-532072073 — Nassif, Sep 17 '19 at 06:11

score 22 · Answer 1 · edited Feb 23 '20 at 19:04

22

If you see the black window background of the activity showing until Flutter renders its first frame, add this on your AndroidManifest, between < activity> ... < /activity>

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

edited Feb 23 '20 at 19:04

Felipe Augusto

7,733
10
39
73

answered Jan 14 '20 at 03:47

silexcorp

1,151
1
12
13

this helped me out. but after doing this my status bar is not showing up in all other pages developed in flutter, can you help me out? @silexcorp – Anu Mar 02 '20 at 10:56
Check the theme in the style.xml file res/values and avoid the full screen (on Android) false false – silexcorp Mar 03 '20 at 00:13

score 20 · Answer 2 · edited Jan 23 '22 at 21:36

20

You can use the package flutter_native_splash to add native splash screens for Android and iOS without the manual changes described in other answers.

The package does the manual changes for you.

1 - Depend on it:

dev_dependencies:
  flutter_native_splash: ^0.1.4

And flutter pub get

2 - Configure your splash screen on pubspec.yaml:

    flutter_native_splash:
      image: assets/images/splash.png
      color: 42a5f5

3 - Run the package

flutter pub run flutter_native_splash:create

Splash screens are now generated.

edited Jan 23 '22 at 21:36

Gene Bo

11,284
8
90
137

answered Aug 26 '19 at 14:28

Henrique Arthur

988
1
9
17

1

If anyone is looking for example https://github.com/jonbhanson/flutter_native_splash/blob/master/example/pubspec.yaml – Swapnil Kadam Jul 21 '21 at 18:07
this seems to be the best working solution, thanks a lot. – Pritam Mullick Aug 10 '21 at 20:04

score 6 · Answer 3 · answered Oct 17 '19 at 22:00

Android - Now you can change in

/AndroidStudioProjects/vendowallet/android/app/src/main/res/drawable/launch_background.xml

Something like

<!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_launcher" />
    </item>

IOS

Change the LaunchImage in Assets.xcassets

score 1 · Answer 4 · answered Dec 13 '19 at 22:08

Among the files generated with the flutter create command. A splash screen is generated to be shown before the first frame when flutter is rendering widgets to screen. You can modify it to show a custom splash screen of your choice or you can just remove it..

Within the android folder, open up the AndroidManifest.xml file.

There you can remove the meta-data with attribute name ..SplashScreenUntilFirstFrame tag within activity named .MainActivity

You can check the drawables folder and styles.xml file to modify the splash screen if you want to keep it.

Within these folders there are also comments that explain more..

score 1 · Answer 5 · answered Jun 28 '21 at 06:03

If you are creating new projects right now, they gave the solution (with commented code in launch_background.xml)

Just open the following files through the android directory.

You will see the following commented code:

Just uncomment it and do as following, You can replace your own image by changing drawable name:

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />

    <!-- You can insert your own image assets here -->
     <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_launcher" />
    </item>
</layer-list>

Hope it will be helpful.

score 1 · Answer 6 · answered Jul 20 '21 at 06:55

Open Android folder and in drawable folder replace your image

In manifest file there is some code Just uncomment it and do as following.

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

Happy coading

score 0 · Answer 7 · answered Apr 30 '20 at 21:32

I had this problem after I had already added in a splash screen. I was getting a white screen as well. It turns out you have to reinstall the app to get rid of any caching and then it should work properly

https://docs.nativescript.org/tooling/publishing/creating-launch-screens-ios

I hope this helps someone else!

score 0 · Answer 8 · answered May 26 '21 at 09:10

0

I were setting proxy right in flutter.bat file. And it was setting proxy for local machine too. So my ABD can't listen the physical device.

So if you have similar case - try to set no_proxy for local zones or remove proxy at all.

answered May 26 '21 at 09:10

Sn1cKa

601
6
11

score -1 · Answer 9 · edited Nov 03 '20 at 14:02

I head the same problem. Even after I added splash screen I got the black screen for the first time loading the app. My solution was to change the flutter channel form stable to beta. To do that open a command prompt

Check what channel you are currently on
```
flutter channel
```
To change the channel type
```
flutter channel [channel name]
```
After that type
```
flutter upgrade
```

That's what helped me. I hope it helps also someone.

I found the solution here: https://github.com/flutter/flutter/issues/37155

Flutter app on start it is showing white screen for few second

9 Answers9

Linked