CODEWITHSUNDEEP
flutter
Abhijeet
Abhijeet

Reputation: 12892

Flutter app shows a black screen before loading the app

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?

Upvotes: 23

Views: 33397

Answers (11)

Muzammil Hassan
Muzammil Hassan

Reputation: 486

Maybe it is out of context but here are the details If someone needs them in future. I had the same problem. App was working fine in other devices but not in mine. Issue was perticularly with vivo devices (checked with 3 vivo devices). I was able to resolved it by contacting [email protected]

you need to write them email to enable one-click authorization for your device

for that you need to provide them some details about your vivo phone that i got in mail (you will also get when you contact them).

Details they need

Upvotes: 0

Lijas
Lijas

Reputation: 1

Put this code on your main page and adjust the seconds as per your needs:

void main() async {
  print(DateTime.now());
  HttpOverrides.global = MyHttpOverrides();
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  await Future.delayed(const Duration(milliseconds: 2000), () {});
  FlutterNativeSplash.remove();

Upvotes: 0

Agung
Agung

Reputation: 13803

check your json file at your asset, in my case I put an invalid json file like this

enter image description here

Upvotes: 0

rozerro
rozerro

Reputation: 7156

Make shure you built a release apk with

flutter build apk

When you run the generated apk the issue should be resolved.

Upvotes: 0

sumanth.js
sumanth.js

Reputation: 414

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.

Upvotes: 0

WeSay Solutions
WeSay Solutions

Reputation: 81

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.

Upvotes: 0

Agung
Agung

Reputation: 13803

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

Upvotes: 0

live-love
live-love

Reputation: 52366

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

Upvotes: 4

Yogesh Alai
Yogesh Alai

Reputation: 179

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

Upvotes: 4

paul
paul

Reputation: 137

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

AndroidManifest.xml check the FlutterActivity and add this code

Upvotes: 3

Collin Jackson
Collin Jackson

Reputation: 116728

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

Upvotes: 10

Related Questions