6
votes

Indicateur de progression de l'application Web Flutter avant de charger l'application?

Salut, je suis un développeur d'applications mobiles et je ne suis pas très familier avec le développement Web, je trouvais une approche pour implémenter l'indicateur de progression avant de charger l'application Web flottante comme l'écran de chargement de Gmail. Flutter Web est cool mais cela prend quelques instants avant de charger l'application. Pouvons-nous ajouter un indicateur pour cette durée de chargement? Tout code implémenté dans Flutter ferait partie de l'application Flutter et cela ne fonctionnera pas.Il devrait y avoir une autre approche pour y parvenir.

flutter flutter-web

0 commentaires

3 Réponses :

7
votes

Dans votre question, vous avez mentionné

Tout code implémenté dans Flutter ferait partie de l'application Flutter et cela ne fonctionnera pas, ...

Je suppose que vous avez essayé d'ajouter l'approche de l'écran de démarrage pour Android ou IOS. Puisque flutter-web est simplement un index.html et quelques fichiers js (par exemple, main.dart.js ), vous devriez peut-être essayer l'astuce d'animation de chargement CSS . Puisque vous n'avez partagé aucun code, je n'écris aucun code, mais ce qui suit serait mon approche, comme l'explique cette vidéo d' agrafeuse rouge. Il / elle a gentiment fourni beaucoup d'animations basées sur CSS ici avec les implémentations codepen pour cela.

Voici donc mes étapes dans le flutter_web_project\web\index.html .

Ajoutez un élément span dans le corps de index.html pour afficher l'animation css elle-même.
Créez un wrapper div pour positionner l'animation d'étendue dans votre index.html .
Ensuite, écoutez l'événement onLoad de la fenêtre et supprimez l'élément div de votre page ou faites-le disparaître comme décrit dans la vidéo.

0 commentaires

6
votes

Avec l'aide de @Abhilash, j'ai pu accomplir cela. J'ai reçu le code du chargeur de w3schools .

Mon project/web/index.html est comme ça.

<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 commentaires

1
votes

En plus de la réponse de @Shahzad Akram, vous devez supprimer le div loading car dans le navigateur Safari, cela peut provoquer un scintillement. Donc, dans le premier écran, vous devez implémenter le code suivant (par exemple, dans la méthode 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();
  }
}

PS Pour de jolis chargeurs, vous pouvez visiter loading.io .

0 commentaires