向Flutter应用添加启动画面


问题内容

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


问题答案:

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

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

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

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

逐步操作的方法如下:

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

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

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

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

  4. 需要将密度为1.5的图像放置在mipmap-hdpi中,
  5. 需要将密度为2的图像放置在mipmap-xdpi中,
  6. 需要将密度为3的图像放置在mipmap-xxdpi中,
  7. 需要将密度为4的图像放置在mipmap-xxxdpi中,

默认情况下,android文件夹中没有drawable-mdpi,drawable-
hdpi等,但是我们可以根据需要创建它们。因此,需要将图像放置在mipmap文件夹中。另外,有关“启动画面”的默认XML代码(在Android中)将使用@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" />-->
    

     <bitmap
         android:gravity="center"
         android:src="@mipmap/your_image_name" />