flutter web启动_将启动画面添加到Flutter Web

最新推荐文章于 2024-06-26 10:36:10 发布

weixin_26638123

最新推荐文章于 2024-06-26 10:36:10 发布

阅读量535

点赞数

文章标签： java

原文链接：https://medium.com/flutter-community/adding-a-splash-screen-to-flutter-web-7930e5e44bd

版权

flutter web启动

When starting up a Flutter application, be it in mobile or web, there is a blank screen displayed before the app shows its first screen. In reality, what happens is that the Flutter framework engine is “booting up” before being able to show the first screen, so by default it shows a white screen.

启动Flutter应用程序时，无论是在移动设备还是Web中，该应用程序显示其第一个屏幕之前都会显示一个空白屏幕。实际上，发生的情况是Flutter框架引擎在能够显示第一个屏幕之前正在“启动”，因此默认情况下会显示白色屏幕。

In both Android and iOS, we can change this by using a Native Splash Screen, since it’s something that native apps extensively use for branding and initialization.

在Android和iOS中，我们都可以使用Native Splash Screen进行更改，因为它是本机应用广泛用于品牌和初始化的内容。

Image for post — Medium’s Android App Splash SCreen

But what about Web? How can we show something different to the user while Flutter is booting up?

但是网络呢？ Flutter启动时，我们如何向用户显示不同的内容？

了解Flutter Web的本机元素 (Understanding the Native Elements of Flutter Web)

After we create a new Flutter project, we can see a folder for each native platform that we target: android, ios, web and macos. Inside each folder are files for each platform, and if we examine specifically the web folder, we can see the following files:

创建新的Flutter项目后，我们可以看到针对我们定位的每个本机平台的文件夹： android ， ios ， web和macos 。每个文件夹中都有每个平台的文件，如果我们专门检查web文件夹，我们可以看到以下文件：

Here we can change some properties of our web application, such as the icon that is displayed on the browser tab, the favicon.png, or adding preview text and images by changing the meta tags in the index.html file (as seen in the addtoany article). The meta tags will produce the following preview on other websites:

在这里，我们可以更改Web应用程序的某些属性，例如浏览器选项卡上显示的图标， favicon.png ，或通过更改index.html文件中的meta标签来添加预览文本和图像(如addtoany文章)。 meta标记将在其他网站上产生以下预览：

We could also add more functionality to our web app, by adding a JavaScript file exposing functions that we could call in Dart with the dart:js library. This can be useful if we want to show a custom JavaScript alert, for example:

我们还可以通过添加一个JavaScript文件来公开我们可以使用dart:js库在Dart调用的函数，从而为我们的Web应用程序添加更多功能。如果我们要显示自定义JavaScript警报，这可能会很有用，例如：

These files are going to be used to load the Flutter application. Specifically, the index.html file is used not only to declare new scripts, the manifest and favicon, but is also used to load the main.dart.js file that is used to boot up Flutter:

这些文件将用于加载Flutter应用程序。具体来说， index.html文件不仅用于声明新脚本，清单和favicon ，而且还用于加载用于启动Flutter的main.dart.js文件：

添加一个简单的启动画面 (Adding a Simple Splash Screen)

In web, we don’t have an explicit way to edit the SplashScreenDrawable as we have in Android or a Storyboard that can be edited in the case of iOS, so we have to work with what we have - the index.html file.

在网络中，我们没有像在Android中那样编辑SplashScreenDrawable或在iOS中可以编辑的Storyboard的明确方法，因此我们必须使用已有的东西index.html文件。

Let’s start with something simple — loading an image from the web. As we can see from W3Schools, this can be done using the <img> tag inside the <body>. So let's start by adding a new image to it.

让我们从简单的事情开始-从Web加载图像。从W3Schools中可以看到，可以使用<body>内的<body> <img>标记完成此操作。因此，让我们开始添加新图像。

First, we add a new folder inside web called img, in which we put our Flutter logo:

首先，我们在web添加一个名为img的新文件夹，在其中放置Flutter徽标：

We can then show it using:

然后我们可以使用以下命令显示它：

Now, when we reload our page, the Flutter logo is displayed!

现在，当我们重新加载页面时，将显示Flutter徽标！

But, as we can see, the image is not centered. A quick Google search shows another helpful page from W3.org telling us how we can quickly center our images — Centering Thing

但是，正如我们所看到的，图像没有居中。快速的Google搜索显示了W3.org上另一个有用的页面，告诉我们如何快速对图像进行居中 — 居中

To add styling to our web page, we will need to first add a styles.css file inside the web folder:

要将样式添加到我们的网页，我们首先需要在web文件夹中添加一个styles.css文件：

Inside it, we can paste the code for centering the image:

在其中，我们可以粘贴代码以使图像居中：

Then, we need to link our style sheet to our index.html file by adding the following to the head section:

然后，我们需要把我们的样式表链接到我们index.html通过将下面的文件head部分：

Finally, we just need to add the class = "center" to our image declaration:

最后，我们只需要在我们的图像声明中添加class = "center" ：

This will now show our image centered:

现在，这将显示我们的图像居中：

We can now go a step further, and adding a background color to our page, by further customizing the styles.css file:

现在，我们可以更进一步，并通过进一步自定义styles.css文件，为页面添加背景色：

结论 (Conclusion)

And this is it! We added a rudimentary Splash Screen to our Flutter Web application! 🤠

就是这样！我们在Flutter Web应用程序中添加了基本的启动画面！ 🤠

As seen in the article, we can easily manipulate our index.html file to provide a "splash" screen to our app. We can even further expand this concept by adding css animations to our app, as we have in this example:

如该文章所示，我们可以轻松地操作我们的index.html文件来为我们的应用程序提供“启动”屏幕。我们甚至可以通过在应用程序中添加css动画来进一步扩展这个概念，如本例所示：

Which can be found in the following Github repository:

可以在以下Github存储库中找到：

As an ending note, this workaround might change in the near future, as the Flutter Team adds more and more functionality to Flutter Web, but until then we can provide a better experience to our users when they are first loading our website.

最后，随着Flutter团队为Flutter Web添加越来越多的功能，这种解决方法可能会在不久的将来发生变化，但是在此之前，我们可以为用户首次加载我们的网站时提供更好的体验。

https://www.twitter.com/gonpalma

https://www.twitter.com/FlutterComm