Le widget Drawer dans Flutter

Le widget Drawer dans Flutter

1. Objectif

• À la fin de ce cours, vous devriez être capable de créer un « Drawer » fonctionnel dans une application Flutter.
• Vous devriez comprendre comment intégrer un « Drawer » dans un widget « Scaffold« , ajouter des éléments de menu personnalisés et gérer la navigation lorsque l’utilisateur sélectionne un élément de menu.

2. Présentation



• Le widget « Drawer » est un élément d’interface utilisateur couramment utilisé dans les applications Flutter pour créer un menu latéral rétractable.
• Il permet aux utilisateurs d’accéder facilement à des fonctionnalités de navigation, des options de menu ou d’autres éléments d’interface utilisateur sans encombrer l’écran principal de l’application.

3. Créer et personnaliser un « Drawer » dans Flutter

• Voici comment créer et personnaliser un « Drawer » dans Flutter :
• Étape 1 : Importer les packages nécessaires
• Avant de commencer, assurez-vous d’importer le package Flutter nécessaire dans votre fichier Dart. Vous devez ajouter cette ligne d’importation en haut de votre fichier :

import 'package:flutter/material.dart';

• Étape 2 : Créer un Scaffold avec un Drawer
• Le « Drawer » est généralement utilisé en conjonction avec le widget « Scaffold ». Vous pouvez l’ajouter à votre arborescence de widgets de cette manière :

Scaffold(
  appBar: AppBar(
    title: Text('Mon App Flutter'),
  ),
  drawer: Drawer(
    // Contenu du Drawer va ici
  ),
  body: // Le reste de votre interface utilisateur va ici
)

• Étape 3 : Ajouter des éléments au Drawer
• Vous pouvez ajouter divers éléments au « Drawer », tels que des listes, des icônes, des en-têtes, etc. Voici un exemple simple de contenu de « Drawer » avec une liste d’éléments :

Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      DrawerHeader(
        child: Text('Menu de Navigation'),
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
      ),
      ListTile(
        title: Text('Accueil'),
        leading: Icon(Icons.home),
        onTap: () {
          // Code pour gérer la navigation vers la page d'accueil
        },
      ),
      ListTile(
        title: Text('Paramètres'),
        leading: Icon(Icons.settings),
        onTap: () {
          // Code pour gérer la navigation vers la page de paramètres
        },
      ),
    ],
  ),
)

4. Exercices d’Application : Créer un Drawer dans Flutter

• Maintenant que vous avez appris les bases du widget « Drawer », voici des exercices pour créer un « Drawer » fonctionnel dans une application Flutter.

• Exercice 01

• Objectif de l’Exercice : Créez une application Flutter avec un « Drawer » contenant au moins trois éléments de menu. Chaque élément de menu doit être associé à une action lorsque l’utilisateur le sélectionne.
• Instructions :
• Créez un nouveau projet Flutter à l’aide de la commande flutter create drawer_app.
• Ouvrez le fichier lib/main.dart et remplacez le code par le code suivant :
Code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mon Application Drawer'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              child: Text('Menu de Navigation'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Accueil'),
              leading: Icon(Icons.home),
              onTap: () {
                // Ajoutez le code pour gérer la navigation vers la page d'accueil ici
              },
            ),
            ListTile(
              title: Text('Paramètres'),
              leading: Icon(Icons.settings),
              onTap: () {
                // Ajoutez le code pour gérer la navigation vers la page de paramètres ici
              },
            ),
            // Ajoutez au moins un élément de menu supplémentaire ici
          ],
        ),
      ),
      body: Center(
        child: Text('Contenu de la Page Principale'),
      ),
    );
  }
}

• Dans le code ci-dessus, vous avez un « Drawer » avec deux éléments de menu : « Accueil » et « Paramètres ». Ajoutez au moins un élément de menu supplémentaire, par exemple « Profil », en suivant le même modèle.
• Ajoutez le code de navigation approprié dans la méthode onTap de chaque élément de menu pour gérer la navigation vers une nouvelle page ou effectuer une action.
• Exécutez l’application à l’aide de la commande flutter run et vérifiez que le « Drawer » fonctionne correctement lorsque vous le faites glisser depuis le bord de l’écran.
• Cet exercice vous permettra de créer un « Drawer » fonctionnel dans une application Flutter et de vous familiariser avec la création d’éléments de menu et de gestion de la navigation. Une fois que vous avez terminé, vous pouvez personnaliser davantage votre « Drawer » en ajoutant des éléments supplémentaires et des fonctionnalités selon vos besoins.

• Exercice 02

• Objectif : Créez une application Flutter avec un Drawer qui contient des options de navigation.
• Instructions :
• Créez un nouveau projet Flutter.
• Dans la page d’accueil de l’application, ajoutez un Scaffold.
• À l’intérieur du Scaffold, ajoutez une AppBar avec un bouton d’icône pour ouvrir le Drawer. Vous pouvez utiliser l’icône du menu hamburger (trois lignes horizontales).
Code

appBar: AppBar(
  title: Text('Mon App Flutter'),
  // Ajoutez un bouton d'icône pour ouvrir le Drawer
  leading: Builder(
    builder: (BuildContext context) {
      return IconButton(
        icon: Icon(Icons.menu),
        onPressed: () {
          Scaffold.of(context).openDrawer();
        },
      );
    },
  ),
),

• Définissez le contenu du Drawer en utilisant le widget Drawer. À l’intérieur du Drawer, vous pouvez ajouter une ListView avec des ListTile pour les options de navigation.
Code

drawer: Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      // En-tête du Drawer (optionnel)
      DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text(
          'Menu de Navigation',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
          ),
        ),
      ),
      // Options de navigation
      ListTile(
        leading: Icon(Icons.home),
        title: Text('Accueil'),
        onTap: () {
          // Ajoutez ici la logique pour la page d'accueil
          Navigator.pop(context); // Fermer le Drawer
        },
      ),
      ListTile(
        leading: Icon(Icons.settings),
        title: Text('Paramètres'),
        onTap: () {
          // Ajoutez ici la logique pour la page de paramètres
          Navigator.pop(context); // Fermer le Drawer
        },
      ),
      // Ajoutez d'autres options de navigation selon vos besoins
    ],
  ),
),

• Remplacez les commentaires dans les onTap des ListTile par la logique réelle de navigation que vous souhaitez implémenter pour chaque option.
• Exécutez votre application Flutter et vérifiez que le Drawer s’ouvre lorsque vous appuyez sur l’icône du menu.