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.
3 Réponses :
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
.
span
dans le corps de index.html
pour afficher l'animation css
elle-même.div
pour positionner l'animation d'étendue dans votre index.html
.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.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>
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 .