Hello ! Je suis Franco, développeur et formateur FlutterFlow. Merci de visiter mon site internet !
La AppBar est un élément essentiel dans la création d’applications mobiles avec FlutterFlow, servant de barre de navigation en haut de l’écran. Ce tutoriel explore en détail les différentes fonctionnalités de la AppBar dans FlutterFlow, y compris sa création, sa configuration et ses propriétés avancées telles que la Sliver AppBar, les sections additionnelles, et les options de personnalisation.
Qu’est-ce que la AppBar ?
La AppBar est un widget situé par défaut en haut de la page et se compose de trois parties principales :
- Leading : Souvent un bouton de navigation permettant de revenir en arrière.
- Title : Le titre de la page.
- Action : Des actions supplémentaires comme ajouter un média ou démarrer une conversation.
Création d’une AppBar
Pour ajouter une AppBar dans FlutterFlow, vous avez plusieurs options :
- Via le widget Scaffold :
- Supprimez l’ancienne AppBar si nécessaire.
- Cliquez sur le widget Scaffold.
- Ouvrez le panneau de widgets et recherchez « AppBar ».
- Ajoutez l’AppBar en cliquant dessus et personnalisez son style.
- Directement à partir de l’icône :
- Cliquez sur l’icône AppBar et choisissez le style souhaité.
La AppBar se positionne en haut de la page, même si elle est listée sous d’autres widgets dans l’arborescence.
Paramètres de la AppBar
Pour gérer les paramètres par défaut de la AppBar :
- Allez dans l’onglet « Paramètres ».
- Ouvrez le sous-onglet « Navbar et AppBar ».
- Sélectionnez la section « AppBar ».
Vous pouvez configurer :
- L’ajout automatique d’une AppBar sur chaque nouvelle page.
- Le style par défaut de l’AppBar.
- La taille, l’élévation et la couleur de fond.
- L’icône par défaut, sa taille et sa couleur.
- Les propriétés de texte (font family, font size, couleur du texte, thème).
La Sliver AppBar
La Sliver AppBar offre des fonctionnalités avancées permettant de changer la taille et le comportement de la AppBar en fonction du défilement de la page :
- Expanded : La taille est agrandie (par exemple 300 pixels).
- Collapsed : La taille est réduite (par exemple 80 pixels).
Pour configurer la Sliver AppBar :
- Activez la Sliver AppBar.
- Définissez les tailles pour les modes Expanded et Collapsed.
- Testez le comportement en défilant la page.
Propriétés Pinned et Floating
- Pinned :
- La AppBar reste visible en haut de la page même en défilant.
- Activez la propriété Pinned pour maintenir la visibilité de la AppBar.
- Floating :
- La AppBar disparaît en défilant vers le bas et réapparaît en défilant vers le haut.
- Activez la propriété Floating pour obtenir ce comportement.
La Bottom Section
La Bottom Section ajoute une section sous la AppBar, utile pour des éléments supplémentaires comme une photo de profil. Pour l’activer :
- Ajoutez la Bottom Section.
- Choisissez sa taille et ajoutez le widget souhaité.
Personnalisation Avancée
- Centrer le Titre :
- Activez l’option « Center Title » pour centrer le titre de la AppBar.
- Ajouter un Background :
- Ajoutez un background à la AppBar via l’arborescence ou en modifiant directement les paramètres dans le UI Builder.
Conclusion
La AppBar est un composant versatile et puissant de FlutterFlow, offrant de nombreuses possibilités de personnalisation et de configuration. Que vous souhaitiez ajouter des actions, personnaliser le style ou utiliser des fonctionnalités avancées comme la Sliver AppBar, ce tutoriel vous guide à travers chaque étape pour optimiser votre application.
Merci d’avoir suivi ce tutoriel. Pour des questions, n’hésitez pas à laisser un commentaire et consultez l’article de blog lié pour plus de détails.