向Flutter应用添加启动画面

Z时代
2024-01-10
分类：问答

您如何处理向Flutter应用添加初始屏幕？它应该先加载并显示任何其他内容。当前，在加载Scaffold（home：X）小部件之前，会短暂闪烁一下颜色。

回答：

我想在Flutter中更详细地介绍启动屏幕的实际方法。

我跟踪了一下这里的痕迹，发现Flutter中的“启动画面”看起来还不错。

也许大多数开发人员（像我一样）都认为Flutter默认没有Splash屏幕，因此他们需要为此做些事情。有一个启动屏幕，但背景为白色，没有人能理解默认情况下已经存在适用于iOS和Android的启动屏幕。

开发人员唯一需要做的就是将品牌形象放置在正确的位置，初始屏幕将开始工作。

逐步操作的方法如下：

（因为这是我最喜欢的平台：））

在Flutter项目中找到“ android”文件夹。

浏览至应用程序-> src->主-> res文件夹，然后将品牌形象的所有变体放入相应的文件夹中。例如：

需要将密度为1的图像放置在mipmap-mdpi中，

需要将密度为1.5的图像放置在mipmap-hdpi中，

需要将密度为2的图像放置在mipmap-xdpi中，

需要将密度为3的图像放置在mipmap-xxdpi中，

需要将密度为4的图像放置在mipmap-xxxdpi中，

默认情况下，android文件夹中没有drawable-mdpi，drawable-

hdpi等，但是我们可以根据需要创建它们。因此，需要将图像放置在mipmap文件夹中。另外，有关“启动画面”的默认XML代码（在Android中）将使用@mipmap，而不是@drawable资源（如果需要，可以更改它）。

Android的最后一步是取消注释drawable / launch_background.xml文件中的某些XML代码。浏览到app-> src-> main-> res-> drawable，然后打开launch_background.xml。在此文件中，您将看到为什么Slash屏幕背景为白色。要应用我们在步骤2中放置的品牌形象，我们必须在您的launch_background.xml文件中取消注释某些XML代码。更改后，代码应如下所示：
```
 
```
```
 <bitmap
     android:gravity="center"
     android:src="@mipmap/your_image_name" />
```

请注意，我们注释了白色背景的XML代码，并且取消了有关mipmap图像的代码注释。如果有人感兴趣，可以在styles.xml文件中使用launch_background.xml文件。

在Flutter项目中找到“ ios”文件夹。

浏览到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"
  }
}