在抖动启动画面之前删除白屏

Question

我正在使用这个 splashscreen package 为我的 flutter 应用程序创建自定义启动画面。默认情况下，它会在显示初始屏幕之前显示一些 blank/white 页面。

有没有直接显示启动画面并跳过这个空白页面的好方法？

Answer 1

这是因为 Android/iOS 闪屏。在 Flutter 绘制第一帧之前，会显示一个原生的启动画面。您可以根据需要调整其颜色和内容。

请参考Adding a splash screen to your mobile app。

如果您只想更改启动画面的颜色：

Android：编辑android/app/src/main/res/values/ic_launcher_background.xml

ic_launcher_background

iOS：用XCode打开ios/Runner/Base.lproj/LaunchScreen.storyboard并在此处调整背景。

Answer 2

将图标粘贴到 android/src/drawable/launcher_bacground.png 或任何目录。

然后粘贴如下代码：

<?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="@drawable/launcher_background" />
    </item> 
</layer-list>

您可以根据需要自定义颜色。

Answer 3

在android/app/main/res/values/中添加一个colors.xml文件如下

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="YOUR_COLOR_NAME">COLOR_VALUE_HEX</color>
</resources>

之后将 android/app/main/res/drawable/ 和 drawable-V21 值更改为此 <item android:drawable="@color/YOUR_COLOR_NAME"/>

就是这样。

Answer 4

对于 Android 应用程序

有两种方法 - 首先，在 drawable 文件夹中添加一个新的启动画面图像。 See Example here

通过添加项目

launch_background.xml

<!-- You can insert your own splash image assets here -->
<item>
    <bitmap
        android:gravity="center"
        android:src="@drawable/splash_screen" />
</item>

不要对launch_background.xml做改动，直接替换launch_background.xml 文件，其中包含要在应用程序启动时显示的新启动画面文件。我假设您已经将新的启动画面图像添加到可绘制文件夹中。现在打开 AndroidManifest.xml 文件并查找元标记 android:name=”io.flutter.embedding.android.SplashScreenDrawable” 。只需将 launch_background 名称替换为您的初始屏幕图像名称即可。（如下更改元标记）。进入 res –> values 文件夹，在这里也将 launch_background 名称替换为您的初始屏幕图像名称。对文件夹值和 values-night 执行此操作。

对于 iOS 应用程序

在 Xcode window 上，单击 Runner-> Runner -> Assets.xcassets 文件夹。在这里，您可以看到 LaunchImage 将具有所有三个不同尺寸的初始屏幕图像粘贴到此文件夹中。

打开LaunchScreen.storyboard 同样在 Assets.xcassets 文件夹下方的左侧菜单中，您将看到 LaunchScreen.Storyboard。单击视图控制器场景 -> 视图控制器 -> 视图。注意：- select（点击）仅查看，不要点击 LaunchImage。您已在上一步中将新启动画面粘贴到 LaunchImage 文件夹中。因此，您将在此 window 中看到相同的新图像。当您 select（单击）查看时，然后在右侧 window 您可以看到更改视图设置的选项，如内容模式、背景、alpha 等。根据需要更改背景颜色并设置内容模式缩放以填充。

调整启动画面 您可以在同一 window 上调整启动画面的位置、大小和背景颜色。只需单击 launchImage 或 select 预览中的图像 window。您可以调整图像大小并调整图像位置。在右侧window，您还可以进行其他设置。

iOS 应用启动画面已准备就绪。

在抖动启动画面之前删除白屏

Remove white screen before flutter splash screen

splash-screen

flutter