创建优秀团?拥墓丶徊绞?2_用扑扑的团块创建启动画面

Welcome back to another article on Flutter framework. Today we are going to talk about how to build a splash screen with BLoC state management library. I hope you know what a splash screen is. For those who do not know, let me give a brief introduction first. When you open an app you may have seen a loading screen, which may show a progress indicator and app logo, after which you will be automatically rerouted to the main interface of the app. This loading screen is called the splash screen. Let me show you a few examples so you will have a better understanding of what it is.

欢迎回到有关Flutter框架的另一篇文章。 今天，我们将讨论如何使用BLoC状态管理库构建启动屏幕。 希望您知道启动画面是什么。 对于那些不知道的人，让我先简单介绍一下。 当您打开一个应用程序时，您可能会看到一个加载屏幕，其中可能显示进度指示器和应用程序徽标，之后您将被自动重新定向到该应用程序的主界面。 此加载屏幕称为启动屏幕。 让我向您展示一些示例，以便您对其有所了解。

I hope now you have an idea about splash screens. Then let’s move into coding! 👨‍💻👩‍💻

我希望您现在对启动屏幕有所了解。 然后让我们开始编码！ 👨‍💻👩‍💻

PREREQUISITE ❓

PREREQUISITE❓

In this article I will not talk deeply about BLoC library; therefore it would be better if you had knowledge about BLoC library before moving on with the article. If you have worked with BLoC then great!😄 you can skip this part. But for those who do not have an idea about BLoC, I strongly recommend you watch this video before moving on.

在本文中，我不会深入讨论BLoC库。 因此，在继续本文之前，如果您了解BLoC库会更好。 如果您使用过BLoC，那就太好了！😄您可以跳过此部分。 但是对于那些不了解BLoC的人，我强烈建议您在继续之前观看此视频 。

Installing the BLoC library 🐱‍🚀

安装BLoC库🐱‍🚀

I hope now you have a good idea about the BLoC library. Then let’s install the library and build the folder structure before start coding.

我希望您现在对BLoC库有个好主意。 然后，在开始编码之前，让我们安装库并构建文件夹结构。

First, add the following line to the pubspec.yaml file in your flutter application. (There will be newer versions released by the time you read this article.)

首先，将以下行添加到flutter应用程序中的pubspec.yaml文件中。 (在阅读本文时，将发布较新的版本。)

After that you must install the library, just write the following code in your command line (for this to work you must have set an environmental variable for flutter). But keep in mind for some code editors like VS Code, this line will be automatically completed, therefore it would be better to check the documentation for your code editor to learn more about that.

之后，您必须安装该库，只需在命令行中编写以下代码即可(要正常工作，您必须为flutter设置一个环境变量)。 但是请记住，对于某些代码编辑器(例如VS Code)，此行将自动完成，因此最好查看代码编辑器的文档以了解更多信息。

Folder Structure 🗿

文件夹结构🗿

Create the folder structure as follows.

如下创建文件夹结构。

Let’s Code! 👨‍💻😎

让我们编码！ ‍💻😎

Now we are all set. Let’s dive into the code!

现在我们都准备好了。 让我们深入研究代码！

Let’s start from the splash_screen_event.dart file.

让我们从splash_screen_event.dart文件开始。

Then we move on to the splash_screen_state.dart file.

然后我们继续到splash_screen_state.dart文件。

Then let’s do splash_screen_bloc.dart.

然后，让我们做splash_screen_bloc.dart。

After that let’s move on to the pages folder. We will start with the splash_screen.dart.

之后，让我们继续进入pages文件夹。 我们将从splash_screen.dart开始。

Then let’s code the splash_screen_widget.dart file.

然后，让我们对splash_screen_widget.dart文件进行编码。

After that, you can code your home page. In here I have created a simple widget with a Text widget (home.dart), but you can fill in with your own design 😉.

之后，您可以对您的主页进行编码。 在这里，我创建了一个带有文本小部件( home.dart )的简单小部件，但是您可以自己填写设计fill。

Finally, let’s create the main.dart file (this file may change depending on your project; therefore add this functionality accordingly).

最后，让我们创建main.dart文件(此文件可能会根据您的项目而变化；因此请相应地添加此功能)。

Finally, you need to run the programme 😁 !

最后，您需要运行程序😁！

Here I have used three important keywords, async, await and yield. If you want to learn more about those keywords please refer to this link.

在这里，我使用了三个重要的关键字， async，await和yield。 如果您想了解更多有关这些关键字的信息，请参考此链接 。

Github link to the code shown in the article 🐱‍👤

Github链接到文章🐱‍👤中显示的代码

You can find the code shown in the article, in this GitHub link.

您可以在此GitHub 链接中找到文章中显示的代码。

Conclusion ✌

结论✌

This is the end of the article. Before I finish I want to say, if I had made any mistakes or if there is an easy way to do this please add a comment below about it. If you find this article useful, feel free to share this among your friends and colleagues.

这是本文的结尾。 在结束之前，我想说一下，如果我犯了任何错误，或者有简单的方法可以执行此操作，请在下面添加有关此内容的评论。 如果您觉得本文有用，请随时与您的朋友和同事分享。

Thank you and HAPPY CODING! 👋👨‍💻👩‍💻

谢谢您，祝您编码愉快！ 👋👨‍💻👩‍💻

P.S

聚苯乙烯

Special thanks should go to Amanda Ariyaratne and Yogya Gamage who helped me by proofreading this article.

特别要感谢Amanda Ariyaratne和Yogya Gamage ，他们通过校对本文为我提供了帮助。