如何在 Flutter 应用程序中创建启动屏幕

Question

我正在 Flutter 中制作一个应用程序，我想创建一个在应用程序首次启动时显示的启动屏幕。首次打开应用程序时，会短暂显示白屏，这意味着 Android 中有一些过程需要在应用程序启动之前完成。我想用我自己的屏幕替换那个白屏。

我不打算制作在应用程序启动后显示的初始屏幕，而是在应用程序 loading/launching 时显示的启动屏幕。

最简单的方法是什么？

我还想说，我已经在互联网上寻找答案，其中大多数都提供添加启动画面，该画面会在应用程序初始化后显示。我不是在寻找那个。感谢您的帮助！

Answer 1

嗯，首先你需要使用一个RootPage。这将显示 loadingPage，然后是 HomePage（或您需要的任何页面）。您只需要使 RootPage 有状态（以便更改页面设置新状态）。

没有唯一的方法。因此，我不会在这里编写代码。我会解释结构。

loadingPage 显示您想要的内容（您可以使用 Animated widgets 使其动画化）

Rootpage 将显示 LoadingPage，您可以使用 Timer dart class 更改根页面的状态以显示主页。另一种方法是在动画完成时从加载页面获取回调。

这是我认为不使用其他管理系统（如 bloc 库）的最简单方法之一

Answer 2

您可以在您的应用中使用闪屏小部件。

1.Get 启动画面在您的 pubspec.yaml 文件中。检查一下 Flutter packages link.

2.import 项目中的启动画面
import 'package:splashscreen/splashscreen.dart';

3.Create 有状态或无状态小部件。

Return 下面的代码：

return MaterialApp(
  home: SplashScreen(
    navigateAfterSeconds: MainScreen(),
    seconds: 3,
    backgroundColor: Colors.white12,
    image: Image.asset('Location of the gif or image to be displayed'),
    loaderColor: Colors.redAccent,
    photoSize: 159,
  ),
);

查看 Rapto Learning 上的更多教程。

Answer 3

在 .android > app > src\main > res 中有一个 drawable 和一个或多个 mipmap 文件夹。这些 mipmap 个文件夹包含不同设备尺寸的图像。将您的图像资产放在那里。现在看看 drawable > launch_background.xml。您可以在下图中看到文件的外观。取消注释第 7-11 行 and/or 将第 4 行更改为另一种颜色，现在您已经自定义了 Flutter 应用程序的默认启动屏幕。现在，如果您启动您的应用程序，使用上面的示例，您的启动屏幕应如下所示：

如何在 Flutter 应用程序中创建启动屏幕

How to create a launch screen in Flutter app

android

flutter

dart

screen

loading