flutter 加载应用程序前抖动Web应用程序进度指示器？

xmakbtuz 于 2023-02-13 发布在 Flutter

关注(0)|答案(8)|浏览(173)

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

flutter

来源：https://stackoverflow.com/questions/57209754/flutter-web-app-progress-indicator-before-loading-app

8条答案

按热度按时间

c90pui9n1#

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

赞(0）回复(0）举报 2023-02-13

uajslkp62#

你在问题中提到
在flutter中实现的任何代码都将是flutter应用程序的一部分，它不会工作，...
我想您尝试过为Android或IOS添加闪屏方法，因为flutter-web只是一个index.html和几个js文件（例如，main.dart.js），你也许应该试试CSS加载动画的技巧。因为你没有分享任何代码，我没有写任何代码，但下面将是我的方法，由这个红色的订书机video解释。He/她好心地提供了很多基于CSS的动画here沿着codepen的实现。
下面是我在flutter_web_project\web\index.html文件中的步骤。
1.在index.html的主体中添加span元素，以显示css动画本身。
1.创建一个div Package 器，以便在index.html中定位跨度动画。
1.然后侦听窗口的onLoad事件，并从页面中删除div元素，或者按照视频中的描述使其淡出。

赞(0）回复(0）举报 2023-02-13

vcirk6k63#

除了@Shahzad Akram的答案，您应该删除loadingdiv，因为在Safari浏览器中它可能会导致 Flink 。因此，在第一个屏幕中，您需要实现以下代码（例如，在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。

赞(0）回复(0）举报 2023-02-13

yb3bgrhw4#

亚当的答案是在Flutter实际加载之前就去掉加载器。
我发现这个脚本是最完整的答案：

<html>
<head>
  <style>
        .loading {
          display: flex;
          flex-flow: column;
          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: 8px solid #f3f3f3;
          border-radius: 50%;
          border-top: 8px solid #00AD87;
          border-right: 8px solid #C30E48;
          border-bottom: 8px solid #00AD87;
          border-left: 8px solid #C30E48;
          width: 60px !important;
          height: 60px !important;
          -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>

  <!-- First time loading -->
  <div class="loading">
      <div class="loader"></div>
  </div>

  <!-- Ensure first time loading progress is gone after app loads -->
  <script>
      window.addEventListener("flutter-first-frame", function() {
          var element = document.getElementsByClassName("loading");
          element[0].parentNode.removeChild(element[0]);
      });
  </script>

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

</body>
</html>

赞(0）回复(0）举报 2023-02-13

czq61nw15#

如果你想删除只加载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>标记

赞(0）回复(0）举报 2023-02-13

7bsow1i66#

除了来自@Shahzad和@BambinoUA的答案之外，我还需要为main.dart.js脚本标记添加***defer***关键字。
<script defer src="main.dart.js" type="application/javascript"></script>
下面是我的场景，其中需要：

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

在这种情况下，整个脚本下载完成后才出现黑屏，动画显示时间只有0.5秒，之后立即加载flutter widget，没有达到加载动画的目的，本地测试中没有出现这种情况。
我也尝试过将动画div放在所有脚本之前，但是没有用。

赞(0）回复(0）举报 2023-02-13

8cdiaqws7#

我认为公认的答案是部分正确的，因为它显示了一个加载指示器而不是一个进度指示器。从flutter doc中，您可以粗略估计Flutter的实际加载进度。我已经使用this indicator编译了一个示例，并展示了here。
添加此样式

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

.progress-bar__container {
  width: 80%;
  height: 2rem;
  border-radius: 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.5s;
  will-change: transform;
  box-shadow: 0 0 5px #e76f51;
}

.progress-bar {
  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  background-color: #e76f51;
  top:0;
  bottom: 0;
  left: -100%;
  border-radius: inherit;
  display: flex;
  justify-content: center;
  align-items:center;
  color: white;
  font-family: sans-serif;
}

.progress-bar__text {
  display: none;
}

并将此代码附加到flutter应用的index.html中。

function updateProgress(num) {
  const progressBarContainer = document.querySelector('.progress-bar__container');
  const progressBar = document.querySelector('.progress-bar');
  const progressBarText = document.querySelector('.progress-bar__text');

  let time = 0;
  let endState = 100;

  gsap.to(progressBar, {
    x: num + "%",
    duration: 2,
  });
}

window.addEventListener('load', function(ev) {
  var loading = document.querySelector('#loading');
  loading.textContent = "Loading entrypoint...";
  updateProgress(15);
  _flutter.loader.loadEntrypoint({
    serviceWorker: {
      serviceWorkerVersion: serviceWorkerVersion,
    },
    onEntrypointLoaded: async function(engineInitializer) {
      loading.textContent = "Initializing engine...";
      updateProgress(50);
      let appRunner = await engineInitializer.initializeEngine();
      updateProgress(80);
      loading.textContent = "Running app...";
      await appRunner.runApp();
      updateProgress(100);
    }
  });
});

赞(0）回复(0）举报 2023-02-13

ff29svar8#

在flutter Web应用程序的启动过程中，我们有两个阶段：第一个阶段是index.html页面已经加载，但实际的flutter应用程序正在加载。然后当flutter应用程序加载时，我们可能还需要在flutter应用程序中做一些准备。我喜欢这两个阶段显示加载指示，我希望这是相同的。所以...我所做的是：
1.首先，index.html显示一个gif，其中显示了一个类似于flutter中的圆形进度指示器（参见2）loading.gif
我的做法与这个人的描述类似：https://retroportalstudio.medium.com/indicate-website-loading-for-flutter-web-apps-7dc5e2c59e24
1.然后在我的flutter应用程序中，我会显示这个指示符：
返回容器（装饰： Package 盒装饰（颜色：颜色（白色），儿童：中心（子级：循环进度指示器（）））;
这个指示器和gif差不多，我创建这个gif的时候用了https://gifcap.dev/和gimp来裁剪它。
其结果是一个相当顺利的加载循环进度指标几乎即时打开我的网站所有的方式，当我的flutterweb应用程序打开。

赞(0）回复(0）举报 2023-02-13

我来回答

flutter 加载应用程序前抖动Web应用程序进度指示器？

8条答案

相关问题

热门标签

最新问答