flutter - 为 Flutter 应用程序添加启动画面

Question

您将如何为 Flutter 应用程序添加启动画面？它应该在任何其他内容之前加载和显示。目前，在 Scaffold(home:X) 小部件加载之前会有短暂的颜色闪烁。

Answer 1

我想进一步说明在 Flutter 中制作启动画面的实际方法。

我跟踪了一点踪迹 here我发现 Flutter 中的启动画面看起来并没有那么糟糕。

也许大多数开发者(比如我)都认为 Flutter 默认没有启动画面，他们需要为此做点什么。有一个启动画面，但它是白色背景，没有人能理解默认情况下已经有适用于 iOS 和 Android 的启动画面。

开发人员唯一需要做的就是将品牌图像放在正确的位置，启动画面就会像这样开始工作。

以下是您可以逐步完成的方法:

首先在 Android 上(因为这是我最喜欢的平台 :))

1. 在您的 Flutter 项目中找到“android”文件夹。

2. 浏览到应用程序 -> src -> main -> res 文件夹并将品牌图像的所有变体放在相应的文件夹中。例如:

• 密度为1的图像需要放在mipmap-mdpi中，
• 密度为1.5的图片需要放在mipmap-hdpi中，
• 密度为2的图像需要放在mipmap-xhdpi中，
• 密度为3的图像需要放在mipmap-xxhdpi中，
• 需要将密度为4的图片放在mipmap-xxxhdpi中，

默认情况下，android 文件夹中没有 drawable-mdpi、drawable-hdpi 等，但我们可以根据需要创建它们。由于这个事实，图像需要放在 mipmap 文件夹中。此外，关于启动画面(在 Android 中)的默认 XML 代码将使用@mipmap，而不是@drawable 资源(您可以根据需要更改它)。

1. Android 上的最后一步是取消注释 drawable/launch_background.xml 文件中的一些 XML 代码。浏览到 app -> src -> main -> res-> drawable 并打开 launch_background.xml。在这个文件中，您将看到为什么 Slash 屏幕背景是白色的。要应用我们在第 2 步中放置的品牌图像，我们必须取消注释 launch_background.xml 文件中的一些 XML 代码。更改后，代码应如下所示:

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

请注意，我们对白底的XML代码进行了注释，对mipmap图片的代码取消了注释。如果有人感兴趣，可以在 styles.xml 文件中使用文件 launch_background.xml。

其次在 iOS 上:

1. 在您的 Flutter 项目中找到“ios”文件夹。

2. 浏览到 Runner -> Assets.xcassets -> LaunchImage.imageset。应该有 LaunchImage.png、LaunchImage@2x.png 等。现在您必须用您的品牌图像变体替换这些图像。例如:

• 密度为1的图片需要覆盖LaunchImage.png，
• 密度为2的图片需要覆盖LaunchImage@2x.png,
• 密度为3的图片需要覆盖LaunchImage@3x.png,
• 密度为4的图片需要覆盖LaunchImage@4x.png,

如果我没记错的话 LaunchImage@4x.png 默认不存在，但您可以轻松创建一个。如果 LaunchImage@4x.png 不存在，您还必须在 Contents.json 文件中声明它，该文件与图像位于同一目录中。更改后，我的 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"
  }
}

这应该就是您所需要的，下次当您在 Android 或 iOS 上运行您的应用程序时，您应该拥有正确的启动画面以及您添加的品牌形象。

谢谢