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

Question

Why my flutter app showing white screen for few sec on start and how to solve this issue ?

Answer 1

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

1. Check what channel you are currently on

   flutter channel
   

2. To change the channel type

   flutter channel [channel name]
   

3. 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

Answer 2

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..

Answer 3

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"
/>

Answer 4

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

Answer 5

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 pub run flutter_native_splash:create

Splash screens are now generated.

Answer 6

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!