Comment utiliser le widget BottomNavigationBar de Flutter
Comment utiliser le widget BottomNavigationBar de Flutter
-
Objectifs
- Ce cours vise à familiariser les développeurs avec l’utilisation du widget
BottomNavigationBardans le contexte de Flutter. - En suivant ce cours, vous apprendrez à intégrer une barre de navigation inférieure dans vos applications, à gérer les onglets associés et à créer une expérience utilisateur fluide.
-
Qu’est-ce que BottomNavigationBar ?
- C’est une bande horizontale en bas de l’écran. Elle peut contenir plusieurs éléments et utiliser du texte, des icônes ou une combinaison des deux.
BottomNavigationBarest un widget dans Flutter qui fournit une barre de navigation en bas de l’écran, permettant aux utilisateurs de basculer entre différentes vues ou onglets. Il est couramment utilisé pour améliorer la navigation au sein d’une application.-
Rôle et utilité de
BottomNavigationBar: -
Rôle de
BottomNavigationBar - Navigation Facilitée : BottomNavigationBar offre une navigation rapide et facile entre les principales sections de l’application. Les utilisateurs peuvent accéder aux fonctionnalités principales en un seul clic, ce qui améliore considérablement l’expérience utilisateur.
- Organisation Logique : Il permet d’organiser les différentes vues ou onglets de manière logique. Chaque onglet peut représenter une fonctionnalité distincte, permettant ainsi aux utilisateurs de comprendre facilement la structure et le flux de l’application.
- Accès Rapide : En plaçant la barre de navigation en bas de l’écran, BottomNavigationBar offre un accès rapide même aux utilisateurs tenant leur appareil d’une seule main. Cela améliore l’ergonomie et la convivialité de l’application, en particulier sur les appareils mobiles.
- Feedback Visuel : Lorsqu’un utilisateur sélectionne un onglet, le BottomNavigationBar fournit un feedback visuel instantané sous la forme d’une animation ou d’un changement de couleur. Cela renforce la compréhension de l’utilisateur quant à la section actuellement active.
-
Avantages de son utilisation dans une application Flutter :
- Uniformité Visuelle : BottomNavigationBar est intégré dans le framework Flutter, ce qui signifie que son apparence est cohérente sur toutes les plateformes prises en charge. Cela contribue à maintenir une uniformité visuelle, indépendamment du système d’exploitation utilisé.
- Personnalisation : Bien que BottomNavigationBar propose une apparence par défaut attrayante, il est également hautement personnalisable. Les développeurs peuvent ajuster les couleurs, les icônes, les libellés et d’autres propriétés pour s’aligner sur le thème de l’application.
- Gestion Intégrée des États : Flutter facilite la gestion des états avec BottomNavigationBar. Les développeurs peuvent maintenir l’état de chaque onglet de manière efficace, garantissant une expérience utilisateur fluide lors de la navigation entre les sections.
- Intégration avec les Routes de Navigation : BottomNavigationBar s’intègre naturellement avec le système de navigation par routes de Flutter. Cela signifie que chaque onglet peut être associé à une nouvelle route, permettant une navigation plus complexe tout en conservant la simplicité de l’interface.
-
Les attributs du widget
BottomNavigationBar - Le widget
BottomNavigationBarde Flutter possède plusieurs attributs qui permettent de personnaliser son apparence et son comportement. Voici une liste des attributs les plus couramment utilisés avec des explications sur leur fonctionnalité : - L’attribut
items - Une liste d’objets BottomNavigationBarItem, décrivant chaque onglet dans la barre de navigation.
items (List<BottomNavigationBarItem>): La liste des éléments de la barre de navigation. Chaque élément est généralement associé à un onglet et peut contenir un icône et/ou une étiquette.- Voici comment vous pouvez utiliser l’attribut icon dans le contexte du widget BottomNavigationBar :
- L’attribut
onTap (Function(int)) - La fonction à appeler lorsque l’utilisateur appuie sur l’un des onglets. Elle prend généralement un argument indiquant l’index de l’onglet sélectionné.
- L’attribut
currentIndex - L’index de l’onglet actuellement sélectionné.
- L’attribut
type (BottomNavigationBarType) - type (
BottomNavigationBarType) : Le type de la barre de navigation, qui peut être fixed pour une barre de navigation avec un nombre fixe d’onglets, ou shifting pour une barre de navigation avec un effet de déplacement. -
Exemple
-
Cas Pratiques
- Explorez des cas pratiques tels que la navigation entre les onglets, la personnalisation avancée, etc.
- Cela devrait vous donner une base solide pour comprendre et utiliser le widget TabBar dans Flutter. N'hésitez pas à poser des questions spécifiques ou à demander des clarifications sur des points particuliers !
1-Ecrivez le code qui permet de réaliser l'écran suivant:2-Ecrivez le code qui permet de réaliser l'écran suivant:3-Ecrivez le code qui permet de réaliser l'écran suivant:
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
// ... autres éléments
],
currentIndex: _selectedIndex,
currentIndex: _selectedIndex,
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey,
appBar: AppBar(title: const Text('<--Drawer')),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
child: Text('Entete du Drawer'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: const Text('Item 1'),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: const Text('Item 2'),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
label: 'Messages',
icon: Icon(Icons.mail),
),
BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile')
],
),
);
}
}
