在加载应用程序之前 Flutter Web 应用程序进度指示器？答案

【问题标题】：Flutter web app progress indicator before loading app?在加载应用程序之前 Flutter Web 应用程序进度指示器？
【发布时间】：2019-12-04 04:35:53
【问题描述】：

您好，我是一名移动应用程序开发人员，对 Web 开发不太熟悉，在加载诸如 Gmail 加载屏幕之类的 Flutter Web 应用程序之前，我正在寻找任何实现进度指示器的方法。 Flutter web 很酷，但在加载应用程序之前需要一些时间。我们可以为这个加载持续时间添加任何指标吗？在 Flutter 中实现的任何代码都将是 Flutter 应用程序的一部分，它不会工作，应该有另一种方法来实现这一点。

【问题讨论】：

标签： flutter flutter-web

【解决方案1】：

除了@Shahzad 和@BambinoUA 的回答，我还需要为 main.dart.js 脚本标签添加 defer 关键字。

<script defer src="main.dart.js" type="application/javascript"></script>

以下是我需要这样做的场景：

应用托管在 Gitlab 页面上
浏览器是 Chrome（网速很慢）

在这种情况下，在下载整个脚本之前，只能看到空白屏幕。然后动画仅可见 0.5 秒，然后立即加载颤振小部件。因此未能达到加载动画的目的。这在本地测试中不会发生。

我也尝试将动画 div 放在所有脚本之前，但没有帮助。

【讨论】：

【解决方案2】：

如果你想只用 JS 删除加载 div，请使用此代码

  <script>
    window.onload = (event) => {
      console.log('page is fully loaded');
      var element = document.getElementById("loader");
      element.parentNode.removeChild(element);
    };
  </script>

请注意，它假定 loader 是 <div id="loader"></div> 标记

【讨论】：

【解决方案3】：

在@Abhilash 的帮助下，我能够做到这一点。我从w3schools 获得加载程序代码。

我的project/web/index.html是这样的。

<html>

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script defer src="index.dart.js" type="application/javascript"></script>

  <style>
    .loading {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    
    .loader {
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid blue;
      border-right: 16px solid green;
      border-bottom: 16px solid red;
      border-left: 16px solid pink;
      width: 120px;
      height: 120px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }
    
    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
      }
    }
    
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div class="loading">
    <div class="loader"></div>
  </div>

  <script src="main.dart.js" type="application/javascript"></script>
</body>

</html>

【讨论】：

【解决方案4】：

除了@Shahzad Akram 的回答，您还应该删除loading div，因为在Safari 浏览器中它可能会导致闪烁。因此，在第一个屏幕中，您需要实现以下代码（例如，在initState 方法中）：

import 'package:universal_html/html.dart'

...

@override
void initState() {
  super.initState()
  // Remove `loading` div
  final loader = document.getElementsByClassName('loading');
  if(loader.isNotEmpty) {
    loader.first.remove();
  }
}

附：对于不错的加载器，您可以访问loading.io。

【讨论】：

是否可以在 Flutter 2.2 中仅从 index.html 中的 js 实现？
@AdamSmaka，如果您知道 什么时候 flutter 完成了应用初始化所需的所有脚本的下载，是的，
这很有趣。 ? 我可以看到上面提到的颤振版本可能有更多的代码。将所有内容都放在一个文件中会很好。

【解决方案5】：

在你提到的问题中

在 Flutter 中实现的任何代码都将是 Flutter 应用程序的一部分，它不会工作，...

我假设您尝试为 android 或 IOS 添加启动屏幕方法。由于flutter-web 只是一个index.html 和几个js 文件（例如main.dart.js），你或许应该尝试CSS 加载动画技巧。由于您没有共享任何代码，因此我没有编写任何代码，但以下将是我的方法，正如这个红色订书机 video 所解释的那样。他/她好心地提供了很多基于CSS 的动画here 以及为此的codepen 实现。

下面是我在flutter_web_project\web\index.html 文件中的步骤。

在index.html 的主体中添加span 元素以显示css 动画本身。
创建一个div 包装器以将跨度动画定位在您的index.html 中。
然后收听窗口的onLoad 事件并从您的页面中移除div 元素或按照视频中的说明将其淡出。

【讨论】：