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

Z时代
2024-01-10
分类：问答

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

回答：

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