Comprendre et utiliser la AppBar avec FlutterFlow

Table des matières

Articles similaires

Vous avez un projet d'application mobile ?

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 :

  1. 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.
  2. 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 :

  1. Allez dans l’onglet « Paramètres ».
  2. Ouvrez le sous-onglet « Navbar et AppBar ».
  3. 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 :

  1. Activez la Sliver AppBar.
  2. Définissez les tailles pour les modes Expanded et Collapsed.
  3. Testez le comportement en défilant la page.

Propriétés Pinned et Floating

  1. 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.
  2. 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 :

  1. Ajoutez la Bottom Section.
  2. Choisissez sa taille et ajoutez le widget souhaité.

Personnalisation Avancée

  1. Centrer le Titre :
    • Activez l’option « Center Title » pour centrer le titre de la AppBar.
  2. 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.

Vous avez un projet d'application mobile ?

Articles similaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Apprenez à créer une application mobile solide plus rapidement que jamais

Une gamme complète de services pour transformer vos idées en applications performantes et intuitives.

Bootcamp Créer son App Mobile

Apprenez à donner vie à vos idées en 6 semaines avec un programme de coaching sur mesure

Formation Créer son App Mobile avec FlutterFlow

Apprenez à donner vie à vos idées avec un programme en autonomie

Coaching FlutterFlow

Session de coaching FlutterFlow personnalisée avec playbook personnalisé.

Templates FlutterFlow

Des templates prêts à l’emploi pour votre application mobile/web FlutterFlow.

Maintenance FlutterFlow

Support technique, tickets illimités et retours traités sous 48h. 

Besoin de faire développer votre application FlutterFlow ? Contactez-moi

Vous souhaitez acheter ce produit ? Laissez-moi vos coordonnées afin que je puis vous envoyer les fichiers

Besoin d'un coaching personnalisé ?

Un programme sur mesure focalisé sur la pratique.