Faire scintiller l'attente [Tuto express inside]
Comment créer des composants de chargement personnalisés rapidement
Hey !
Aujourd’hui, je te propose une astuce pour améliorer l’expérience au moment du chargement des données.
La gestion visuelle du temps de chargement des données est un point d’attention majeure à avoir dans une application mobile pour 2 raisons principales :
Les gens zappent facilement et sont impatients.
Le temps de chargement dépend beaucoup du réseau et demande encore plus d’attention que le web.
Mais juste avant :
La question de la semaine ?!?
Est-il possible de connecter une app FlutterFlow sur un projet Backend web existant ?
Oui, complètement. FlutterFlow permet d’effectuer des appels.
Néanmoins, le fait qu’il existe déjà une application web avec un backend ne signifie pas qu’il y a une API disponible. L’API est une interface qui permet un service (ici une application mobile) à un autre service (un backend) avec une authentification ou non.
Si l’API existe, elle est fournie avec une documentation qui te permet de voir les urls à appeler, le type de la requête (Get, Post, Put, Delete) et les formats JSON ou XML à envoyer et recevoir.
Sur cette page, tu peux retrouver une liste d’API publiques regroupées par centre d’intérêt. C’est très utile pour s’entraîner à manipuler les API ou faire une application front pour son portfolio par exemple.
À noter que la version gratuite de FlutterFlow est limitée à 2 appels.
Merci pour cette question, chaque édition, je réponds à une de vos questions !
Les loaders intégrés
FlutterFlow propose des indicateurs de chargements (Backend Query Loading Widget) que l’on peut ajouter à chaque appel de données.
Il y a du choix et cela fonctionne très bien.
Rappel : c’est primordial de le mettre et ne pas rien afficher aux utilisateurs pendant le chargement. Il risque de penser qu’il y a un problème et… De s’en aller.
Néanmoins on rencontre des limites sur ce composant que tu as peut-être expérimenté. Pour exemple, 2 cas :
Cas 1 : si l’élément de chargement est dans une colonne scrollable, à leurs apparitions, tes vraies données vont prendre plus de place et provoquer un effet de saut qui fait cheap.
Cas 2 : si la page affiche une liste où chaque élément nécessite une requête.
Ce n’est pas génial, on est d’accord.
Alors comment améliorer ça ?
Let’s go !
La solution c’est de mettre en place des Shimmer Effect.
C’est quoi ?
L’effet Shimmer c’est une visualisation en mouvement de processus de chargement sur une application.
Le changement par rapport aux loaders que je t’ai présenté juste avant, c’est qu’un effet Shimmer respecte exactement le Layout de la page après chargement. C’est-à-dire que même avant le chargement de tes données, la place des données sera occupée par des éléments en mouvement. Voici un exemple :
C’est plus sympa ?
Voyons comment l’implémenter dans FlutterFlow
Créer un Shimmer Effect
Comme je sais que le temps c’est important, je t’ai préparé un tutoriel vidéo de 5 minutes seulement.
À la fin, non seulement tu auras un template de Shimemr pour les listes que tu pourras réutiliser dans plusieurs projets mais tu sauras comment en créer d’autres facilement.
Edit du 21/03.2024:
Maintenant l’animation Shimmer existe nativement dans les animations FlutterFlow
Pour le définir en tant que composant de chargement d’une requête, il faut créer un composant et l’appeler ici :
Créer sa bibliothèque personnelle
Si tu veux créer plusieurs applications, c’est un composant de base que tu as intérêt à réutiliser. Je te conseille de créer un template, et même plusieurs.
💡Le petit outil pour créer des dégradés, c’est Color Space.
L’actu
La plus importante est la montée de version à Flutter 3.19.1, certains packages ne seront plus compatibles. Si tu as importé des packages dans ton projet, une petite icône violette apparaît dans ton projet. Elle te permet de les tester avant la mise à jour et de prévoir les changements nécessaires.
Tout le mois de mars, FlutterFlow organise des workshops en 6 langues pour la communauté.
Toutes les infos pour s’inscrire sont ici → Les Workshops
C’est terminé pour aujourd’hui 👋
J'ai besoin de ton retour pour les prochaines éditions. Mon objectif est vraiment de te proposer du contenu actionnable, et sans toi, je ne peux pas y arriver.
Laisse un petit ❤️ et un commentaire (juste en dessous) si cette édition t’a plu. Je lis tout.
Je te donne rendez-vous dans 15 jours pour la prochaine édition de La Potion FlutterFlow, le 21 mars à 7h.
À bientôt
Vanessa
P.S. : Tu peux me partager ta problématique du moment avec FlutterFlow en répondant à cet email. Je pourrais traiter ta question dans une prochaine édition.
Merci beaucoup pour toutes ces précieuses informations et tips !!
Bien cool la vidéo, très claire et bien utile !