Flutter app shows a black screen before loading the app

Question

I have noticed this problem with flutter apps, when I open a flutter app from cold boot, I see a black screen popping before the actual app is loaded. I have seen the problem with the Newsvoice production app and as well as with a test app I installed.

Check the video here: https://www.youtube.com/watch?v=zszud6UWzps

Is it a bug in the Flutter SDK?

score 7 · Accepted Answer · answered Aug 23 '17 at 00:59

7

This issue was fixed recently. If you are using a version of Flutter that has this engine fix, you won't see the black frame. (The fix should be on the Flutter master branch by now, but not the alpha branch.)

answered Aug 23 '17 at 00:59

Collin Jackson

97,818
28
207
143

score 4 · Answer 2 · answered Mar 05 '20 at 06:47

4

It's not issue, this for hot reload. Don't worry about that. When you run with release, you can't see this.

if you want to be sure try ->

flutter run --release

answered Mar 05 '20 at 06:47

Yogesh Alai

150
1
5

3

May be you should not start your answer with 'It's not issue' because it totally is, only in debug mode though. The release mode part is helpful – Sisir Mar 17 '20 at 20:29

score 3 · Answer 3 · answered Dec 19 '19 at 09:13

3

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

AndroidManifest.xml check the FlutterActivity and add this code

answered Dec 19 '19 at 09:13

paul

137
4

1

what's `my_splash`? – DolDurma Sep 12 '20 at 03:13

score 1 · Answer 4 · answered Jan 17 '21 at 17:11

It's not a bug. That's the way it behaves normally. You can replace the loading black screen with an image:

In AndroidManifest.xml, here is where you can change your splash image.

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

Find the files:

android\app\src\main\res\drawable\launch_background.xml

android\app\src\main\res\drawable-v21\launch_background.xml

Change the files to add your own custom image:

<item>
    <bitmap android:gravity="center" android:src="@drawable/splash_image" />
</item>

Your splash image should be stored in the drawable folders:

android\app\src\main\res\drawable\splash_image.png

app\src\main\res\drawable-v21\splash_image.png

This Worked for me. But, I had to remove 'android:gravity="center" ' for a perfect render. — Akash Neeli, Jul 27 '21 at 11:34

score 0 · Answer 5 · answered May 17 '21 at 08:57

I can solve this issue, after removing FutureBuilder when using Firebase. just initialize Firebase app on main() like this

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

instead of using FutureBuilder on your build method

score 0 · Answer 6 · edited Jul 29 '21 at 14:41

The black screen is something which comes for a variety of reasons is what I have gathered from looking at different responses on the net. In my case I realized on thing, that my Firebase.initializeApp() was returning an error in the snapshot of my FutureBuilder due to which no widgets were being rendered. I tried everything to no avail. Finally I moved my project to a completely new folder as described here

and then my black screen issue got resolved.

Flutter app shows a black screen before loading the app

6 Answers6

Linked