Hello merci de visiter mon site internet ! Je suis Franco MUOIO, développeur et formateur FlutterFlow
Dans cet article, nous allons explorer en détail l’App Builder de FlutterFlow. Nous allons couvrir chaque aspect de l’interface utilisateur afin que vous puissiez naviguer facilement et utiliser toutes les fonctionnalités offertes par cet outil puissant.
FlutterFlow est une plateforme qui facilite le développement d’applications mobiles en permettant aux développeurs de créer des applications de manière visuelle. L’App Builder de FlutterFlow est divisé en quatre sections principales : le menu de navigation, la barre d’outils, la zone de canva, et le panneau de propriétés.
Navigation menu
Situé à gauche de l’écran, le menu de navigation est divisé en plusieurs onglets essentiels :
- Widget Panel : C’est ici que vous trouverez tous les widgets disponibles pour votre application.
- Widget Suite : Vous permet de voir l’arborescence de votre application, y compris les dossiers, les pages, et les composants.
- Storyboard : Offre une simulation de votre application avec les liens entre les pages, les widgets, et les éléments cachés.
- Firestore : Vous donne un aperçu de votre base de données Firestore et vous permet de gérer les collections et les documents.
- Data Schema et Data Type : Vous permet de définir des types de données personnalisés et des enums pour structurer vos données.
- AppValue : Gère les états de l’application et les constantes locales.
- API Call : Centralise tous vos appels API.
- Media Asset : Gère les médias de votre application.
- Custom Code : Divisé en trois parties, pour les fonctions personnalisées, les widgets personnalisés, et les actions personnalisées.
- Cloud Functions : Vous permet d’ajouter des fonctions cloud directement.
- Test Automatique : Pour exécuter des tests sur votre application.
- Theme Settings : Gère les couleurs, les typographies, et le design système de votre application.
- App Settings : Gère les paramètres du projet, les icônes de l’application, la collaboration, Firebase, les langues, l’accessibilité, les permissions, et plus encore.
- Authentification : Active ou désactive les notifications push, gère le déploiement mobile et la publication web, ainsi que les intégrations avec divers services.
Tools bar
La barre d’outils, située en haut de l’écran, contient plusieurs fonctionnalités importantes :
- Informations du Projet : Affiche le nom et l’ID du projet.
- Help : Offre de la documentation, la possibilité de donner des feedbacks, et de reporter des bugs.
- Keyboard Shortcut : Affiche une pop-up avec tous les raccourcis clavier disponibles.
- Command Panel : Permet de rechercher une page, un composant, ou un appel API.
- Project History : Affiche les différentes versions de votre application et permet de restaurer des backups.
- Commentaires du Projet : Pour ajouter des commentaires sur le projet.
- Optimisation : Donne des recommandations pour améliorer les performances de votre application.
- Issues : Affiche les problèmes et les erreurs qui doivent être corrigés.
- Branches : Permet de créer des sous-branches pour développer des fonctionnalités sans impacter la branche principale.
- Developer Menu : Pour voir le code de votre application, gérer le dépôt GitHub, télécharger le code ou l’APK, et utiliser la CLI FlutterFlow.
- Share Project : Permet de partager votre projet avec d’autres utilisateurs.
- Preview App : Offre un rendu visuel de l’application pour voir le design en temps réel.
- Test : Pour lancer une émulation de l’application sur le web ou via l’application FlutterFlow.
Canva area
La zone de canva, au centre de l’écran, est l’espace de travail principal où vous concevez et prévisualisez votre application. Vous pouvez y gérer la taille de votre simulation, activer le Safe Area pour adapter l’application à tous les types de téléphones, et changer la couleur du canva.
Properties panel
Le panneau de propriétés, à droite de l’écran, est divisé en deux sections principales : les propriétés de la page et les propriétés des widgets individuels.
Properties panel de la Page
- Page Parameters : Ajoute des paramètres à la page.
- Routing Settings : Gère le chemin et le nom de la page.
- Propriétés Visuelles : Gère l’opacité, la couleur de fond, et la Safe Area.
- Actions : Ajoute des actions comme Navigate to.
- Queries : Permet de faire des requêtes sur la page.
- Local Page State : Gère les données locales accessibles uniquement à l’échelle de la page.
Properties panel des Widgets
Chaque widget a ses propres propriétés que vous pouvez gérer individuellement. Cela inclut l’opacité, le padding, l’alignement, les actions, les requêtes enfants, les animations, et les commentaires pour expliquer la logique de votre widget.
En maîtrisant ces différentes sections de l’App Builder de FlutterFlow, vous serez en mesure de créer des applications mobiles de manière efficace et intuitive. Chaque élément de l’interface est conçu pour vous fournir les outils nécessaires à chaque étape du développement.
Si vous avez des questions, n’hésitez pas à les poser en commentaire
