7.7. Navigation et routage dans Flutter : navigation par onglets

La navigation et le routage sont des éléments essentiels dans toute application car ils permettent aux utilisateurs de se déplacer entre différentes pages ou écrans. Dans Flutter, la navigation et le routage sont principalement gérés par le widget « Navigator » et le « PageRoute ». Cependant, pour une expérience plus personnalisée et rationalisée, Flutter propose également une navigation par onglets. Explorons cela en détail.

Comprendre la navigation par onglets dans Flutter

La navigation par onglets est une approche courante pour organiser l'interface utilisateur dans les applications mobiles. Il permet aux utilisateurs de basculer entre différents écrans ou sections d'une application en appuyant sur une icône ou un titre d'onglet en bas ou en haut de l'écran. Dans Flutter, cela est facilité par un ensemble de widgets, notamment « TabController », « TabBar » et « TabBarView ».

TabController

Le TabController est un objet qui coordonne la sélection des onglets et l'animation du glissement entre les onglets. Il est normalement créé une fois et transmis aux widgets 'TabBar' et 'TabBarView' qui l'utilisent. Le TabController peut être créé à l'aide du constructeur par défaut ou à l'aide de la méthode 'of' pour récupérer un TabController existant.

Barre d'onglets

La TabBar est un widget qui affiche une rangée horizontale d'onglets. Il est généralement placé en haut de l’écran ou en bas de l’AppBar. Chaque onglet est représenté par un widget, qui peut être une icône, du texte ou les deux. Lorsqu'un utilisateur appuie sur un onglet, la TabBar en informe le TabController, qui active ensuite l'onglet correspondant.

TabBarView

Le TabBarView est un widget qui affiche le contenu de l'onglet actuel. Il utilise le TabController pour basculer entre différents onglets lorsque l'utilisateur appuie sur un onglet de la TabBar. Chaque onglet de TabBarView est représenté par un widget, qui est créé lorsque l'onglet devient actif et détruit lorsqu'il est remplacé par un autre onglet.

Mise en œuvre de la navigation par onglets

Pour implémenter la navigation par onglets dans Flutter, vous devez suivre ces étapes :

1. Créez un TabController en transmettant le nombre d'onglets et le vsync, qui est normalement « ceci ».
2. Créez un TabBar et transmettez-lui le TabController. Définissez des onglets à l'aide de la propriété 'tabs' et des widgets qui représentent chaque onglet.
3. Créez un TabBarView et transmettez-lui le TabController. Définissez le contenu de chaque onglet à l'aide de la propriété 'children' et des widgets représentant le contenu de chaque onglet.
4. Enveloppez TabBar et TabBarView avec un widget Scaffold ou AppBar pour afficher TabBar en haut de l'écran.

Il est important de se rappeler que TabController, TabBar et TabBarView doivent être utilisés ensemble pour garantir que la sélection des onglets et l'animation de balayage sont correctement coordonnées.

Conclusion

La navigation par tabulations est un moyen efficace d'organiser l'interface utilisateur dans les applications mobiles. Dans Flutter, cela est facilité grâce à un ensemble de widgets qui vous permettent de créer une expérience de navigation par onglets personnalisée et optimisée. Avec les connaissances et la pratique appropriées, vous pouvez utiliser la navigation par onglets pour améliorer la convivialité et l'expérience utilisateur de vos applications Flutter.

Page suivante de lebook gratuit :

93Navigation et routage dans Flutter : navigation dans les tiroirs

3 minutes