CATALOGUE Code & Data Formation No Code Maîtriser FlutterFlow - De l'Idée à l'Application

Guide de Configuration de la Navbar sur FlutterFlow

Retour à la formation
Chapitre 4 Leçon 4
Précédent
Suivant

Découvrez comment activer et configurer la navbar dans FlutterFlow pour une navigation optimale sur vos applications.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons apprendre à configurer la navbar sur FlutterFlow. La navbar est un élément essentiel qui permet de naviguer facilement entre les différentes pages de votre application. Pour commencer, nous devons activer la navbar dans les paramètres de FlutterFlow. Allez dans Paramètres, puis Navbar et Appbar. Cochez l'onglet Navbar.

FlutterFlow exige que deux pages au minimum soient configurées pour s'afficher sur la navbar. Nous allons d'abord activer la navbar sur la page 'Mes Histoires'. Ensuite, nous faisons de même pour la page 'Mon Compte'. Une fois ces deux pages configurées, la navbar apparaîtra automatiquement.

Il existe trois types de navbars disponibles dans FlutterFlow : la navbar par défaut Flutter, la Google navbar, et la floating navbar. Vous pouvez changer l'ordre des liens dans la navbar, modifier les labels et icônes, et ajuster la taille des icônes selon vos préférences.

Enfin, si vous souhaitez afficher la navbar sur une page spécifique sans que cette page soit référencée dans les liens de la navbar, il suffit de cocher 'Always Show Navbar on Page'. Cela permet de garder une navigation fluide sans ajouter la page dans les liens de la navbar.

Objectifs de cette leçon

À la fin de cette vidéo, vous serez capable de :

  • Activer et configurer la navbar dans FlutterFlow
  • Personnaliser les links et les icônes de la navbar
  • Afficher la navbar sur des pages spécifiques sans les lister dans les liens

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez :

  • Avoir des connaissances de base en FlutterFlow
  • Avoir un projet FlutterFlow avec plusieurs pages configurées

Métiers concernés

Cette leçon est particulièrement utile pour les :

  • Développeurs d'applications mobiles
  • Designers UI/UX
  • Chefs de projet technique

Alternatives et ressources

En alternative à FlutterFlow, vous pouvez utiliser :

  • Adobe XD pour la conception d’interface utilisateur et la navigation
  • Figma pour prototyper et tester la navigation des applications

Questions & Réponses

Il est nécessaire d'activer la navbar dans les paramètres de FlutterFlow pour que l'option apparaisse et que l'on puisse la configurer sur les différentes pages de l'application.
Pour ajouter une nouvelle page à la navbar sans l'afficher dans les liens, cochez l'option 'Always Show Navbar on Page' dans les paramètres de la page.
L'utilisation d'icônes personnalisées dans la navbar de FlutterFlow permet d'améliorer l'interface utilisateur et de rendre la navigation plus intuitive, ce qui peut accroître l'engagement des utilisateurs.