7.9. Navigation et routage dans Flutter : navigation avec barre de navigation inférieure

L'un des aspects les plus cruciaux du développement d'applications est la possibilité de naviguer entre différents écrans et sections. Dans Flutter, cette fonctionnalité est assurée à travers le concept de routage et de navigation. Dans ce contexte, concentrons-nous sur l'un des composants les plus couramment utilisés pour la navigation : la barre de navigation inférieure.

La barre de navigation inférieure est une barre de navigation horizontale généralement placée au bas d'une application. Il permet aux utilisateurs de basculer entre les différentes sections de l'application en un seul clic. Cette barre de navigation inférieure est couramment utilisée dans les applications à grande échelle où la navigation entre différentes sections est requise.

Comment implémenter la navigation avec la barre de navigation inférieure

Pour implémenter la navigation par barre de navigation inférieure dans Flutter, nous devons d'abord définir une barre de navigation inférieure dans notre application. Pour ce faire, nous pouvons utiliser le widget BottomNavigationBar de Flutter. Ce widget reçoit une liste d'éléments (BottomNavigationBarItem) qui représentent les différentes sections de l'application.

Tout d'abord, nous devons définir un état pour l'index de la page actuelle. Cet état changera chaque fois qu'un nouvel élément est sélectionné dans la barre de navigation inférieure.

int _currentIndex = 0;

Ensuite, nous définissons la liste des pages qui représentent les différentes sections de l'application. Chaque page est représentée par un widget.

Liste finale _pages = [ Page d'accueil(), Page de recherche(), Page de profil(), ];

Ensuite, nous définissons la barre de navigation inférieure dans la méthode de construction du widget principal. Ici, nous définissons les éléments inférieurs de la barre de navigation et gérons la logique de changement de page lorsqu'un élément est sélectionné.

Barre de navigation inférieure ( Indexactuel : _currentIndex, onTap : (index) { setState(() { _currentIndex = indice ; }); }, articles: [ BottomNavigationBarItem( icône : Icône (Icons.home), étiquette : 'Accueil', ), BottomNavigationBarItem( icône : Icône (Icons.search), libellé : 'Recherche', ), BottomNavigationBarItem( icône : Icône (Icons.person), libellé : 'Profil', ), ], ),

Enfin, nous affichons la page actuelle dans le corps du widget principal. Nous utilisons l'état _currentIndex pour déterminer quelle page afficher.

corps : _pages[_currentIndex],

Conclusion

La navigation avec la barre de navigation inférieure est une partie essentielle du développement d'applications dans Flutter. Il permet aux utilisateurs de basculer facilement entre les différentes sections de l'application, améliorant ainsi l'expérience utilisateur. Avec Flutter, la mise en œuvre de la navigation Bottom Navigation Bar est simple et directe, grâce au widget BottomNavigationBar et à la flexibilité du système de routage de Flutter.

Pour créer des applications plus complexes et avancées, vous pouvez combiner la navigation dans la barre de navigation inférieure avec d'autres techniques de routage et de navigation, telles que la navigation par tiroirs, la navigation par onglets et la navigation par pile. Cela vous permettra de créer des applications avec une navigation plus riche et une expérience utilisateur plus immersive.

En conclusion, la navigation et le routage sont des aspects cruciaux du développement d'applications Flutter, et la maîtrise de ces concepts est essentielle pour devenir un développeur Flutter compétent.

Répondez maintenant à l’exercice sur le contenu :

Quel est le rôle de la barre de navigation inférieure dans le développement de l'application Flutter ?

1

Permet la création d'icônes personnalisées dans l'application.

2

Permet aux utilisateurs de basculer entre les différentes sections de l'application en un seul clic.

3

Vous permet de créer des animations dans l'application.

Tu as raison! Félicitations, passez maintenant à la page suivante

Vous avez raté! Essayer à nouveau.

Page suivante de lebook gratuit :

95Navigation et routage dans Flutter : navigation avec page vue

3 minutes

Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou App Store !