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 8 · Accepted Answer · answered Aug 23 '17 at 00:59

8

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

110,240
31
221
152

score 3 · Answer 2 · 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

4

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

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

3

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

151
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
For me it is other way, it is not showing on the debug mode but shows when i put the app on test flight – Ahmad Khan Jun 12 '23 at 06:46

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

score 0 · Answer 7 · answered May 14 '23 at 11:30

It's not a bug, it is an actual splash screen. to replace that black/white screen you can refer to this docs

or

1. Run this command on terminal

flutter pub add flutter_native_splash

This will add a line like this to your package's pubspec.yaml and run an implicit flutter pub get:

dependencies:
  flutter_native_splash: ^2.2.19

2. How to set the splash screen

in your project's pubspec.yaml file, after dev_dependencies add..

flutter_native_splash:
  color: "#FFA500" 
  image: assets/logo.png  // you need to have an image in the assets folder
  android: true
  ios: true

3. Run the package

run the following command in terminal

flutter pub run flutter_native_splash:create

this will resolve the problem.

Flutter app shows a black screen before loading the app

7 Answers7

Linked