向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 bring 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.

浏览到应用程序-> src->主-> 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-xdpi中，
• 密度为3的图像需要放置在mipmap-xxdpi中，
• 密度为4的图像需要放置在mipmap-xxxdpi中，
• 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,

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

By default in the android folder there isn't 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代码.浏览至应用程序-> src->主-> res->可绘制并打开launch_background.xml.在此文件中，您将看到为什么Slash屏幕背景为白色.要应用我们在第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-> LaunchImage.imageset.应该有LaunchImage.png，LaunchImage @ 2x.png等.现在，您必须将这些图像替换为品牌图像变体.例如:

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屋！