如何使用加载微调器为 Flutter Web 应用程序添加前缀？答案

【问题标题】：how to preface flutter web app with loading spinner?如何使用加载微调器为 Flutter Web 应用程序添加前缀？
【发布时间】：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 完成所有准备工作之前显示加载微调器？

【问题讨论】：

标签： javascript html css flutter flutter-web

【解决方案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>

截图

【讨论】：