在这篇文章中，我们将学习如何在Flutter应用中集成一个闪屏。但首先，为什么在您的应用程序中拥有一个闪屏是必不可少的？
什么是闪屏？
闪屏是一个初始屏幕，当用户启动应用程序时，在主页面加载之前就会显示。它可能看起来不大，因为它只显示很短的时间。但是，闪屏真的可以起到很大的作用，因为它们是应用程序的第一印象。
你可能认为大多数用户会忽略它们。但是闪屏确实有影响，甚至是下意识的。它们为整个应用程序的主题和用户体验定下了基调。
把闪屏想象成你的应用程序的欢迎屏幕。它们也有助于让你的用户知道由于网络问题或其他错误导致的加载延迟。正因为如此，我们作为开发者应该知道如何为我们的移动应用程序添加一个合适的闪屏。
飞溅屏概述
由于闪屏在任何应用程序中都是一个有价值的初始元素，你需要学习如何正确地整合它们。因此在本教程中，我们将学习如何在Flutter生态系统中这样做。
具体步骤非常简单，因为我们将使用一个包来帮助我们整合屏幕，称为 闪屏.这个包允许我们只用几行代码就可以设置闪屏以及闪屏出现的时间。而且我们不需要接触任何本地代码。
因此，让我们开始学习如何添加一个简单的闪屏，包含文本、图像和加载指示器。
创建一个新的Flutter项目
首先，我们需要创建一个新的Flutter项目。为此，请确保您已经安装了Flutter SDK和其他Flutter应用开发相关的组件。
如果一切都设置好了，那么要创建一个项目，你可以简单地在任何你想要的本地目录中运行以下命令:
flutter create splashSceenExample
项目建立后，在项目目录内导航，在终端执行以下命令，在可用的模拟器或实际设备中运行该项目。
flutter run
构建成功后，你将在模拟器屏幕上得到以下结果:
如何安装splashscreen包
现在我们的flutter项目已经启动并运行，我们可以安装所需的依赖项。现在，你可以通过篡改Android和iOS文件夹中的原生代码来添加一个闪屏--但如果你不是一个原生的Android或iOS开发者，这并不是你需要知道如何做的事情。
幸运的是，我们有*splashscreen*包，可以很容易地在你的Flutter应用程序中添加一个闪屏。该包提供了小部件和各种自定义参数，可以在您的应用程序中设置一个简单的介绍性闪屏。
为了使用它，你需要先把它添加到你的依赖项中。要做到这一点，只需复制下面代码段中的那段代码并将其粘贴到你的 pubspec.yaml文件中:
splashscreen: ^1.3.5
该软件包提供了一个SplashScreen widget，让你在导航到你的应用程序的主屏幕之前显示一个闪屏。
如何在你的应用程序中添加一个闪屏
现在，我们要使用由splashscreen包提供的SplashScreen widget。我们的想法是将SplashScreen widget应用于你的MaterialApp widget的home 参数。你可以在下面的代码片断中看到整体的编码实现:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: SplashScreen(
seconds: 8,
navigateAfterSeconds:MyHomePage(title: 'Flutter Demo Home Page'),
title: new Text(
'SplashScreen Example',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.white),
),
backgroundColor: Colors.lightBlue[200],
)
);
}
}
在这段代码中，我们在MaterialApp的home参数中引入了SplashScreen widget。在SplashScreen widget里面，我们配置了几个参数。让我们更仔细地看一下每一个:
seconds:seconds选项允许你输入你想要显示闪屏的时间，单位是秒。navigateAfterSeconds:这个选项允许你定义小部件或屏幕（最好是应用程序的主屏幕），在闪屏结束后显示。title：这个选项让你为你的闪屏添加文本。在这里，我们使用了 widget和一些样式来做这个。TextbackgroundColor：这允许你指定闪屏的整体背景颜色。
好了，这就是一个简单的带文本的闪屏配置,这就是它的模样:
在这里，你可以看到，在默认的主页加载之前，闪屏会出现几秒钟。默认情况下，加载器也会显示。
但是，我们可以通过在SplashScreen widget中应用useLoader 参数来控制加载器的可见性，这个参数可以是真也可以是假。
如何在你的闪屏上添加一个自定义加载器
我们已经有了默认的加载器。但是，我们可以通过使用loaderColor 选项来控制它的颜色和风格，如下面的代码片段所示:
home: SplashScreen(
seconds: 8,
navigateAfterSeconds:MyHomePage(title: 'Flutter Demo Home Page'),
title: new Text(
'SplashScreen Example',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.white),
),
backgroundColor: Colors.blue,
styleTextUnderTheLoader: new TextStyle(),
loaderColor: Colors.white
)
现在你会得到如下演示中的结果:
在这里，你可以看到，我们已经将加载器的颜色改为白色。
如何在闪屏上添加图片或标志
现在为了使闪屏看起来更好，我们可以添加一个图像或图表--也许是一个标志或类似的东西。
SplashScreen 小组件为你提供了两个额外的参数，以便在飞溅屏幕中正确设置标志。image 选项让你从你的资产或网络中添加图像，而photoSize 选项让你指定图像的尺寸。
最好从你的资产中添加图片，因为加载网络图片取决于连接性，有时图片可能会因为网络连接过慢而无法显示出来。
因此，我们需要把图片放到我们的 ./assets目录中，然后在文件中注册它的路径。 pubspec.yaml文件中。然后，我们可以使用image 和photoSize 选项，如下面的代码片断所示:
home: SplashScreen(
seconds: 5,
navigateAfterSeconds:MyHomePage(title: 'Flutter Demo Home Page'),
title: new Text(
'SplashScreen Example',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.white),
),
image: new Image.asset('assets/flut.png'),
photoSize: 100.0,
backgroundColor: Colors.blue,
styleTextUnderTheLoader: new TextStyle(),
loaderColor: Colors.white
)
这将是结果:
正如你所看到的，我们把图片放在了我们文本的顶部。还有其他可用的选项，你可以通过闪屏包本身的文档来探索。
就这样，你拥有了它!请记住，这在Android和iOS上都适用，不需要单独实现。
结论
多亏了splashscreen插件，为你的应用程序添加一个闪屏并不难。本教程的主要目的是向您展示如何在不接触原生代码的情况下将闪屏集成到您的Flutter应用程序中。
在这里，你学会了如何创建一个闪屏并包括文本、加载指示器和图片。现在，挑战是如何使用SplashScreen widget所提供的其余参数。
记住，一个漂亮的闪屏也有助于缓解用户在启动你的应用程序时可能产生的焦虑。所以，它也确实提供了心理健康的好处。
请记住，splashcreen 插件的功能是有点有限的。如果你想创建一个自定义的闪屏，并完全控制你可以添加到其中的内容，那么你将不得不进入本地代码。不过，对于简单的闪屏来说，这个插件还是可以完成任务的。
最后，你可以从其他已经存在的Flutter应用中获得灵感。
