向 Flutter 应用程序添加启动画面 [英] Adding a splash screen to Flutter apps

问题描述

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

How would you approach adding a splash screen to Flutter apps? It should load and display before any other content. Currently, there is a brief flash of color before the Scaffold(home:X) widget loads.

推荐答案

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

I want to shed some more light on the actual way of doing a Splash screen in Flutter.

我跟踪了一点这里，我发现事情并非如此Flutter 中的启动画面看起来很糟糕.

I followed a little bit the trace here and I saw that things aren't looking so bad about the Splash Screen in Flutter.

也许大多数开发人员(像我一样)都认为 Flutter 中默认没有启动画面，他们需要对此做些什么.有一个启动画面，但它是白色背景，没有人能理解默认情况下已经有iOS和Android的启动画面.

Maybe most of the devs (like me) are thinking that there isn't a Splash screen by default in Flutter and they need to do something about that. There is a Splash screen, but it's with white background and nobody can understand that there is already a splash screen for iOS and Android by default.

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

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.

您可以按以下步骤操作:

Here is how you can do it step by step:

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

First on Android (because is my favorite Platform :) )

1. 找到android"Flutter 项目中的文件夹.

1. Find the "android" folder in your Flutter project.

浏览应用程序 ->源代码 ->主要 ->res 文件夹并将您的品牌形象的所有变体放在相应的文件夹中.例如:

Browse to the app -> src -> main -> res folder and place all of the variants of your branding image in the corresponding folders. For example:

• 密度为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 资源(您可以根据需要更改它).

By default in the android folder there isn't a drawable-mdpi, drawable-hdpi, etc., but we can create them if we want. Because of that fact the images need to be placed in the mipmap folders. Also the default XML code about the Splash screen (in Android) is going to use @mipmap, instead of @drawable resource (you can change it if you want).

1. Android 上的最后一步是取消注释 drawable/launch_background.xml 文件中的一些 XML 代码.浏览到应用程序 ->源代码 ->主要 ->资源->可绘制并打开launch_background.xml.在这个文件中，你会看到为什么斜线屏幕背景是白色的.要应用我们在第 2 步中放置的品牌形象，我们必须取消对 launch_background.xml 文件中的一些 XML 代码的注释.更改后，代码应如下所示:

1. The last step on Android is to uncomment some of the XML code in drawable/launch_background.xml file. Browse to app -> src -> main -> res-> drawable and open launch_background.xml. Inside this file, you shall see why the Slash screen background is white. To apply the branding image which we placed in step 2, we have to uncomment some of the XML code in your launch_background.xml file. After the change, the code should look like:

 <!--<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 文件.

Please pay attention that we comment the XML code for the white background and uncomment the code about the mipmap image. If somebody is interested the file launch_background.xml is used in styles.xml file.

iOS 上的第二个:

1. 找到ios"Flutter 项目中的文件夹.

1. Find the "ios" folder in your Flutter project.

浏览至跑步者 ->Assets.xcassets ->启动Image.imageset.应该有 LaunchImage.png、[e-mail] 等.现在您必须将这些图像替换为您的品牌图像变体.例如:

Browse to Runner -> Assets.xcassets -> LaunchImage.imageset. There should be LaunchImage.png, [e-mail], etc. Now you have to replace these images with your branding image variants. For example:

• 密度为 1 的图像需要覆盖 LaunchImage.png，
• 密度为 2 的图像需要覆盖 [e-mail]，
• 密度为 3 的图像需要覆盖 [e-mail]，
• 密度为 4 的图像需要覆盖 [e-mail]，

如果我没猜错，默认情况下 [e-mail] 不存在，但您可以轻松创建一个.如果 [e-mail] 不存在，您还必须在 Contents.json 文件中声明它，该文件与图像位于同一目录中.更改后，我的 Contents.json 文件如下所示:

If I am not wrong [e-mail] doesn't exist by default, but you can easily create one. If [e-mail] doesn't exist, you have to declare it in the Contents.json file as well, which is in the same directory as the images. After the change my Contents.json file looks like this :

{
  "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"
  }
}

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

That should be all you need, next time when you run your app, on Android or iOS you should have the right Splash Screen with the branding image which you added.

谢谢

这篇关于向 Flutter 应用程序添加启动画面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！