Flutter Web 项目在初次打开时加载非常慢，本文通过在加载Flutter web引擎时，先通过加载一个CSS动画来使程序更加友好。

添加CSS动画

添加以下<style>标签内容到<head>标签中

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

  <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: 15px solid ;
      border-top: 16px solid blue;
      border-right: 16px solid white;
      border-bottom: 16px solid blue;
      border-left: 16px solid white;
      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>

添加动画到界面

添加以下代码到<script src="main.dart.js" type="application/javascript"></script>前

1
2
3

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

完整<body>代码如下

1
2
3
4
5
6

<body>
<div class="loading">
  <div class="loader"></div>
</div>
<script src="main.dart.js" type="application/javascript"></script>
</body>

效果如下

subject