Hello merci de visiter mon site internet je suis Franco, développeur et formateur FlutterFlow
Bienvenue dans ce guide détaillé sur la création de votre premier projet avec FlutterFlow. Dans cet article, nous allons explorer les étapes nécessaires pour configurer votre compte, créer votre premier projet, et développer votre première page. Que vous soyez un débutant ou un développeur expérimenté, ce tutoriel vous aidera à naviguer dans FlutterFlow avec aisance.
Création d’un Compte FlutterFlow
Pour commencer, rendez-vous sur flutterflow.io et cliquez sur « Start for Free ». FlutterFlow propose plusieurs offres :
- Version gratuite : Fonctionnalités limitées mais suffisantes pour tester l’outil.
- Offre à 30$ par mois : Permet d’exporter votre code et d’avoir un domaine personnalisé pour la publication web.
- Version Pro : Inclut la connexion à GitHub, l’hébergement du code, et la publication en un clic sur les stores Apple et Android.
Inscrivez-vous en choisissant l’option qui convient le mieux à vos besoins. Une fois votre compte créé, vous pouvez commencer à explorer l’interface.
Création d’un Nouveau Projet
Choisir un Template ou une Blank App
Après avoir créé votre compte, connectez-vous et accédez à la section de création de projet. Vous aurez deux options :
- Blank App : Créer une application à partir de zéro.
- Template : Utiliser un modèle préexistant avec des fonctionnalités intégrées.
Pour notre exemple, nous allons créer une Blank App. Nommez votre projet (par exemple, « Mon Premier Projet ») et configurez les paramètres initiaux :
- Nom du Projet : Choisissez un nom unique pour identifier votre application.
- Package Name : Divisé en trois parties (com.nomdecompagnie.nomduprojet), ce nom est crucial pour la configuration sur les stores.
- Thème : Sélectionnez le thème par défaut ou personnalisez-le.
- Activation Web : Choisissez si votre application sera accessible sur le web.
- Setup Firebase : Intégrez Firebase pour gérer le back-end de votre application.
Pour ce guide, nous désactiverons Firebase.
Créer votre Première Page
Utilisation de Widget Tree
Une fois votre projet créé, nous allons ajouter une page. Dans le panneau de gauche, cliquez sur « Widget Tree » pour accéder à l’arborescence de votre application. Cliquez sur « Add Page » pour créer une nouvelle page.
Vous aurez encore une fois le choix entre utiliser un template ou créer une blank page. Pour notre exemple, nous créerons une blank page nommée « Première Page ». La page sera ajoutée dans l’arborescence de votre projet sous le dossier « Pages ».
Organisation des Composants et Flows
Vous pouvez également créer des components et des flows :
- Components : Éléments réutilisables dans plusieurs pages.
- Flows : Scénarios utilisateur comme les processus de chat, de panier d’achat ou de création de compte.
Pour organiser votre projet, créez des dossiers comme « Components » pour structurer votre arborescence.
Utilisation des Templates et Thèmes
Pour explorer les templates, nous allons créer une seconde page en utilisant un thème. Cliquez sur « My Theme » pour appliquer les paramètres de thème par défaut. Par exemple, un template de page de connexion inclura déjà les actions nécessaires comme « Sign In ».
Conclusion
Nous avons couvert les bases de la création d’un compte FlutterFlow, la configuration d’un nouveau projet, et la création de pages et de composants. FlutterFlow offre une interface intuitive pour le développement d’applications, simplifiant la gestion du front-end et l’intégration avec des back-ends comme Firebase.
Si vous avez des questions, n’hésitez pas à les poser en commentaire. Pour plus de détails sur l’AppBuilder de FlutterFlow, consultez mes autres vidéos
