Flutter app on start it is showing white screen fo

问题:

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

回答1:

You can overwrite this splash screen inside platform specific code. See here examples of how to do that.

回答2:

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

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

回答3:

Flutter: How to fix white screen on app startup in Flutter Android Studio.

If you are a Flutter developer. You definitely have seen a blank white screen before application first screen launch, that mean in flutter contain default splash screen

Flutter Apps do take some amount of time to start up, especially on a cold start. There is a delay there that you may not be able to avoid. This is an unconfigured section of the app that first time they launch. Instead of leaving a blank screen during this time. We should use it to display a splash screen until the app takes to configure itself.

1. In a flutter application, you might have observed that a long blank screen. Actually, there is a Splash screen, but it is with a white background and nobody can understand that there is already a splash screen for iOS and Android by default.

2. This is actually cool because the only thing that the developer needs to do is to put the branding image in the right place and the splash screen will start working just like that.

Android folder in Changes configuration .

1. Find the "android" folder in your Flutter project and browse to app -> src -> main -> res folder and place all of the variants of your branding image in the corresponding folders. For example:

   The image with density 1 needs to be placed in mipmap-mdpi.
   The image with density 1.5 needs to be placed in mipmap-hdpi.
   The image with density 2 needs to be placed in mipmap-xdpi.
   The image with density 3 needs to be placed in mipmap-xxdpi.
   The image with density 4 needs to be placed in mipmap-xxxdpi.
   

   By default for the android folder there isn't drawable-mdpi, drawable-hdpi etc. but you can create if he wants to put all variants there.

2. After that, go to app -> src -> main -> res-> drawable and open launch_background.xml. Inside this file, you will see why the splash screen background is white. To apply the branding image we need to change it as below. We have to un comment some of the XML code in your launch_background.xml file.

   launch_backgound.xml

3. If you want to change the application icon. Go to the app -> src -> main-> manifest file and declare application icon there as we did below.

   AndroidManifest.xml

iOS folder in Changes configuration .

1. Find the "ios" folder in your Flutter project and go to Runner -> Assets.xcassets -> LaunchImage.imageset. There should be LaunchImage.png, [e-mail] etc. Now you have to replace these images with you branding image variants. For example:

   The image with density 1 needs to override LaunchImage.png,
   The image with density 2 needs to override [e-mail],
   The image with density 3 needs to override [e-mail],
   The image with density 4 needs to override [e-mail],
   

   If [e-mail] does not exist by default. You can easily create it and you have to declare it in the Contents.json file as well, which is in the same directory as the images. After the change Contents.json file looks like this :

   Contents.json

   {
     "images" : [
     {
        "idiom" : "universal",
        "filename" : "LaunchImage.png",
        "scale" : "1x"
     },
     {
        "idiom" : "universal",
        "filename" : "[e-mail]",
        "scale" : "2x"
     },
     {
        "idiom" : "universal",
        "filename" : "[e-mail]",
        "scale" : "3x"
     },
     {
        "idiom" : "universal",
        "filename" : "[e-mail]",
        "scale" : "4x"
     }
     ],
     "info" : {
     "version" : 1,
     "author" : "xcode"
    }
   }
   

   Now, run your app and you will see. On the Android and iOS, you should have the right Splash Screen with the branding image that you added and the blank white screen removed as you can see above.

   Then in your MyApp(), in your initState(), you can use Future.delayed to set up a timer or call any API. Until the response is returned from the Future, your launch icons will be shown and then as the response comes, you can move to the screen you want to go to after the splash screen.

回答4:

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.

回答5:

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

回答6:

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 command prompt and then first check on what channel are you currently to do that type "flutter channel".

To change the channel type "flutter channel [channel you won't]".

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

回答7:

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

回答8:

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