Question

为什么我的Flutter应用在启动时显示白屏几秒钟，以及如何解决此问题？

Answer 1

如果看到活动的黑色窗口背景一直显示到Flutter渲染第一帧，请将其添加到 AndroidManifest 的之间 strong> ...

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

Answer 2

您可以在特定于平台的代码中覆盖此初始屏幕。请参见here的示例。

Answer 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

<item android:drawable="@android:color/white" />
<item>
    <bitmap
        android:gravity="center"
        android:src="@mipmap/your_image_name" />
</item>

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

<application
        android:name="io.flutter.app.FlutterApplication"
        android:label="flutter_splash"
        android:icon="@mipmap/logo">


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, LaunchImage@2x.png 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 LaunchImage@2x.png,
The image with density 3 needs to override LaunchImage@3x.png,
The image with density 4 needs to override LaunchImage@4x.png,


If  LaunchImage@4x.png 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" : "LaunchImage@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@3x.png",
      "scale" : "3x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@4x.png",
      "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.

Answer 4

您可以使用软件包flutter_native_splash添加适用于Android和iOS的本机启动屏幕，而无需其他答案中所述的手动更改。

该软件包会为您进行手动更改。

1-取决于它：

dev_dependencies:
  flutter_native_splash: ^0.1.4

还有flutter pub get

2-在pubspec.yaml上配置初始屏幕：

flutter_native_splash:
  image: assets/images/splash.png
  color: 42a5f5

3-运行程序包

flutter pub pub run flutter_native_splash:create

现在生成了启动屏幕。

Answer 5

在使用flutter create命令生成的文件中。当颤动将小部件呈现到屏幕时，将生成一个初始屏幕，以显示在第一帧之前。您可以对其进行修改以显示您选择的自定义启动屏幕，也可以将其删除。

在android文件夹中，打开 AndroidManifest.xml 文件。

您可以在属性 .MainActivity

中删除属性名称为 .. SplashScreenUntilFirstFrame 标签的元数据。

如果要保留启动画面，可以检查 drawables 文件夹和 styles.xml 文件来修改启动画面。

在这些文件夹中，还有一些注释可以解释更多信息。

Answer 6

我遇到了同样的问题。即使添加了启动屏幕后，我还是第一次加载该应用程序时出现黑屏。我的解决方案是将颤动通道形式更改为beta。为此，请打开命令提示符

检查您当前在哪个频道上
```
flutter channel
```
更改频道类型
```
flutter channel [channel name]
```
在那之后输入
```
flutter upgrade
```

这就是帮助我的原因。希望对别人也有帮助。

我在这里找到了解决方法：https://github.com/flutter/flutter/issues/37155

Answer 7

在初始屏幕中添加后，我遇到了这个问题。我也得到了白屏。事实证明，您必须重新安装该应用程序才能摆脱任何缓存，然后它才能正常工作

https://docs.nativescript.org/tooling/publishing/creating-launch-screens-ios

我希望这对其他人有帮助！

Answer 8

我在 flutter.bat 文件中设置了代理权限。它也在为本地机器设置代理。所以我的 ABD 无法监听物理设备。

因此，如果您有类似情况 - 尝试为本地区域设置 no_proxy 或完全删除代理。

Answer 9

打开 Android 文件夹并在 drawable 文件夹中替换您的图像

清单文件中有一些代码只需取消注释并执行以下操作。

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

快乐编码

Answer 10

如果在使用Flutter框架的iOS中黑屏，白屏或启动屏幕被关闭的速度过快，请尝试使用https://github.com/flutter/flutter/issues/36365#issuecomment-532072073

中提到的步骤

Answer 11

Android -现在您可以在

中进行更改

/AndroidStudioProjects/vendowallet/android/app/src/main/res/drawable/launch_background.xml

类似

java.lang.IllegalStateException: Failed to load ApplicationContext

IOS

更改 Assets.xcassets

中的 LaunchImage

Answer 12

如果您现在正在创建新项目，他们提供了解决方案（在 launch_background.xml 中带有注释代码）

通过android目录打开以下文件即可。

您将看到以下注释代码：

只需取消注释并执行以下操作，您可以通过更改可绘制名称来替换自己的图像：

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />

    <!-- You can insert your own image assets here -->
     <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_launcher" />
    </item>
</layer-list>

希望能帮到你。

Flutter应用在启动时会显示白屏几秒钟

12 个答案: