Question

您好，我是移动应用程序开发人员，对Web开发不太熟悉，我发现在加载波动较大的Web应用程序（例如Gmail加载屏幕）之前，可以找到实现进度指示器的任何方法。 Flutter网站很酷，但是加载应用程序需要花费一些时间。我们可以在此加载期间添加任何指标吗？在flutter中实现的任何代码都将成为flutter应用程序的一部分，并且将无法正常工作，应该有另一种方法来实现这一目标。

Answer 1

在@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>

Answer 2

您提到的问题

在flutter中实现的任何代码都将成为flutter应用程序的一部分，并且将无法正常工作，...

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

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

在span的正文中添加index.html元素以显示css动画本身。
创建一个div包装器，将跨度动画放置在index.html中。
然后收听窗口的onLoad事件，并从页面中删除div元素或按照视频中的说明淡出它。

Answer 3

除了回答@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();
  }
}

P.S。要获得出色的加载程序，您可以访问loading.io。

Answer 4

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

fig, ax = plt.subplots()
plt.scatter(y,x)
ax,fit = plot_odr(y, x, ax)

注意它假定 loader 是一个 Error: Package: libzip5-1.8.0-2.el7.remi.x86_64 (remi-safe) Required: libzstd(x86-64) >= 1.3.6 Available: libzstd-1.3.4-1.el7.x86_64 (mariadb-main) libzstd(x86-64) = 1.3.4-1.el7 Error: Package: libzip5-1.8.0-2.el7.remi.x86_64 (remi-safe) Required: libzstd(x86-64) >= 1.3.6 Install: libzstd-1.3.4-1.el7.x86_64 (mariadb-main) libzstd(x86-64) = 1.3.4-1.el7 标签

Answer 5

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

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

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

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

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

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

加载应用程序前Flutter Web App进度指示器？

5 个答案: