如何使用加载微调器为 Flutter Web 应用程序添加前缀？
Posted
技术标签:
【中文标题】如何使用加载微调器为 Flutter Web 应用程序添加前缀？【英文标题】：how to preface flutter web app with loading spinner? 【发布时间】：2021-06-06 15:18:49 【问题描述】：使用 Flutter 构建的 Web 应用具有非常大的包大小，并且可能需要很长时间才能加载。在我的用例中，这不是一个真正的问题，用户不会反弹。但我想避免他们盯着白屏 5 到 10 秒，没有任何反馈。
在我的 Flutter Web 应用加载之前，如何显示基于 html/CSS 的加载微调器？
网络应用嵌入到web/index.html。我已经包含了一个小的 javascript sn-p，它在重新加载页面之前要求用户确认。这是正确执行的。
在这里，我找到了一个不错的自容器 html 和 css 微调器：https://projects.lukehaas.me/css-loaders/
如果我将微调器添加到一个空的 html 模板，它工作正常。
但是如果我将它添加到web/index.html 的正文中，它在屏幕上是不可见的。
当使用“检查元素”查看 DOM 时，我可以看到微调器已加载，但被颤振 canvaskit 渲染器覆盖。 在我看来，flutter 在页面加载时几乎立即为这个渲染器设置了 div，然后需要很长时间才能加载剩余的资源。
是否可以在 Flutter 完成所有准备工作之前显示加载微调器？
【问题讨论】：
【参考方案1】：本教程对我很有效：https://medium.com/flutter-community/adding-a-splash-screen-to-flutter-web-7930e5e44bd
只需创建您的 css 文件，这是我在 web/ 文件夹中的 styles.css：
.loader, .loader:after
border-radius: 50%;
width: 10em;
height: 10em;
.loader
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(0, 217, 255, 0.2);
border-right: 1.1em solid rgba(0, 217, 255, 0.2);
border-bottom: 1.1em solid rgba(0, 217, 255, 0.2);
border-left: 1.1em solid #00d9ff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
@-webkit-keyframes load8
0%
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
100%
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
@keyframes load8
0%
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
100%
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
然后在web/index.html 的<head> 中导入你的css：
<head>
<!--
ios meta tags & icons, etc...
-->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
最后在<body> 中添加你的微调器（它应该是正文的第一行）：
<body>
<div class="loader">Loading...</div>
<!-- Register the service worker -->
</body>
截图
【讨论】：
以上是关于如何使用加载微调器为 Flutter Web 应用程序添加前缀？的主要内容，如果未能解决你的问题，请参考以下文章
当页面数据未从 Firebase 完全加载时显示加载指示器/微调器 - Flutter