Flutter 中的动态闪屏答案

【问题标题】：Dynamic Splash-Screen in FlutterFlutter 中的动态闪屏
【发布时间】：2020-09-03 09:44:50
【问题描述】：

我是 Flutter 的新手，我尝试构建一个启动画面，等待构建一些小部件。是否有可能在不设置初始屏幕出现的随机延迟时间的情况下做到这一点？

非常感谢。

【问题讨论】：

检查FutureBuilder 小部件。它允许您编写代码以在其他活动正在进行时显示某些内容，例如数据获取。一旦这些活动结束，您就可以在屏幕上显示您的主要内容。

标签： flutter splash-screen future

【解决方案1】：

无法使用本机启动画面。但您可以创建自定义屏幕。我假设您想通过 http 请求或类似的方式加载一些数据。您可以在自定义初始屏幕中加载数据，一旦加载完成，导航到您想要的屏幕。

也看看这个。 flare_splash_screen 3.0.1

【讨论】：

【解决方案2】：

您必须以本地方式执行此操作。首先是Android（因为是我最喜欢的平台:)）

在您的 Flutter 项目中找到“android”文件夹。
浏览到 app -> src -> main -> res 文件夹，并将品牌形象的所有变体放在相应的文件夹中。例如：
- 密度为1的图片需要放在mipmap-mdpi中，
- 密度为1.5的图片需要放在mipmap-hdpi中，
- 密度为2的图片需要放在mipmap-xdpi中，
- 密度为3的图片需要放在mipmap-xxdpi中，
- 密度为4的图片需要放在mipmap-xxxdpi中，

android文件夹默认没有drawable-mdpi、drawable-hdpi等，但是每个人都可以根据自己的意愿进行创作。这就是为什么需要将图像放置在 mipmap 文件夹中的原因。另外，关于 Splash 屏幕（在 Android 中）的默认 XML 代码将在 @mipmap 中查看，而不是在 @drawable 中查看（如果需要，您可以更改它）。

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

请注意我们注释了白色背景的代码，取消了mipmap图片的注释。如果有人感兴趣，这个launch_background.xml 在styles.xml 文件中使用。

现在适用于 iOS：

在 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 文件如下所示：

{ “图片” ： [ { “成语”：“通用”， "文件名" : "LaunchImage.png", “比例”：“1x” }, { “成语”：“通用”， "文件名" : "LaunchImage@2x.png", “规模”：“2x” }, { “成语”：“通用”， "文件名" : "LaunchImage@3x.png", “比例”：“3x” }, { “成语”：“通用”， "文件名" : "LaunchImage@4x.png", “比例”：“4x” } ], “信息”：{ “版本”：1， “作者”：“xcode” } }

这应该就是全部了。下次在 Android 和 iOS 上运行应用时，您应该会看到带有您添加的品牌形象的正确启动画面。

无论如何，如果您已经使用 flutter create 创建了项目，您最好看看这个文档：https://flutter.dev/docs/development/ui/assets-and-images#updating-the-launch-screen

【讨论】：