Le widget PopupMenuButton dans Flutter

Le widget PopupMenuButton dans Flutter

1. Objectif

• Ce tutoriel vous guidera à travers la création et l’utilisation d’un PopupMenuButton dans Flutter. Vous apprendrez à :
• Créer un PopupMenuButton.
• Ajouter des éléments de menu.
• Gérer les sélections d’éléments.
• Personnaliser l’apparence du PopupMenuButton.

2. Qu’est-ce que le menu contextuel Flutter ?



• Le PopupMenuButton est un widget Flutter qui affiche une liste d’éléments lorsque l’utilisateur clique sur le bouton. Il est souvent utilisé pour afficher un menu contextuel avec plusieurs options.
• Le PopupMenuButton est utile lorsque vous avez besoin d’afficher une liste d’options à partir d’un bouton. Par exemple, dans une application de commerce électronique, vous pouvez l’utiliser pour afficher différentes catégories de produits ou des options de tri.
• Un menu contextuel Flutter est un menu contextuel qui apparaît sur l’interface utilisateur (UI) d’une application en réponse à une action de l’utilisateur. En règle générale, un widget de texte répertorie les actions ou les options pertinentes pour le contexte ou l’état actuel de l’application. Le framework Flutter simplifie l’ajout de ces menus à votre application avec le widget PopupMenuButton.
• Le widget PopupMenuButton fait partie de la bibliothèque de matériaux de Flutter, qui suit les directives de Material Design . Il gère automatiquement le rendu et le comportement du menu contextuel, y compris les animations et l’affichage des éléments de menu. Lorsqu’un utilisateur sélectionne un élément dans le menu contextuel, le widget peut déclencher des fonctions ou des actions spécifiques au sein de l’application, améliorant ainsi l’interaction globale de l’utilisateur.
• Pourquoi utiliser des menus contextuels ? Ils sont essentiels pour les applications nécessitant une interface utilisateur propre et avec un encombrement minimal. En masquant des options supplémentaires derrière une icône de menu, les développeurs peuvent garder l’interface principale concentrée sur le contenu ou les actions principales, ne révélant plus d’options que si nécessaire.

3. Propriétés du widget PopupMenuButton

1. La propriété itemBuilder

1. Description

• La propriété itemBuilder est utilisée pour créer les éléments de menu qui apparaîtront lorsque vous cliquerez sur un PopupMenuButton. Cette fonction doit être fournie lors de la création du PopupMenuButton et elle renvoie une liste d’éléments de menu, généralement de type PopupMenuItem.

2. Détails

• Fonction requise : itemBuilder est une fonction obligatoire qui doit être fournie pour chaque PopupMenuButton. Sans cette fonction, le menu contextuel ne pourra pas être affiché.
• Paramètre de la fonction : La fonction prend un paramètre de type BuildContext qui fournit le contexte de l’arborescence des widgets.
• Retourne une liste d’éléments de menu : La fonction doit renvoyer une liste de widgets, généralement des PopupMenuItem ou d’autres types d’éléments de menu comme CheckedPopupMenuItem.
• Création d’éléments de menu : Chaque élément de menu est un PopupMenuItem avec une valeur et un enfant (le widget qui sera affiché dans le menu).

3. Exemple

• Voici un exemple de comment utiliser la propriété itemBuilder dans un PopupMenuButton :

PopupMenuButton(
  itemBuilder: (BuildContext context) {
    return [
      PopupMenuItem(
        child: Text('Option 1'),
        value: 'option1',
      ),
      PopupMenuItem(
        child: Text('Option 2'),
        value: 'option2',
      ),
      PopupMenuItem(
        child: Text('Option 3'),
        value: 'option3',
      ),
    ];
  },
  onSelected: (value) {
    // Gérer la sélection de l'option
    print('Selected: $value');
  },
);

2. La propriété onSelected

1. Description

• La propriété onSelected est utilisée pour spécifier une fonction de rappel qui sera appelée lorsqu’un élément est sélectionné dans le PopupMenuButton. Cette fonction recevra la valeur de l’élément sélectionné, ce qui vous permet de définir des actions spécifiques en fonction de l’option choisie.

2. Détails

• Fonction de rappel requise : onSelected est une fonction de rappel qui doit être définie pour chaque PopupMenuButton si vous souhaitez réagir aux sélections d’éléments.
• Paramètre de la fonction : La fonction de rappel reçoit un paramètre qui est la valeur de l’élément sélectionné. Cette valeur est celle définie dans le PopupMenuItem.
• Actions personnalisées : Vous pouvez définir des actions personnalisées en fonction de l’élément sélectionné.

3. Exemple

• Voici un exemple de comment utiliser la propriété onSelected dans un PopupMenuButton :

PopupMenuButton(
  itemBuilder: (BuildContext context) {
    return [
      PopupMenuItem(
        child: Text('Option 1'),
        value: 'option1',
      ),
      PopupMenuItem(
        child: Text('Option 2'),
        value: 'option2',
      ),
      PopupMenuItem(
        child: Text('Option 3'),
        value: 'option3',
      ),
    ];
  },
  onSelected: (value) {
    // Saisissez ici l'action à effectuer lorsqu'un élément est sélectionné dans le menu contextuel
    print('Valeur sélectionnée : $value');
  },
);

3. La propriété initialValue

1. Description

• La propriété initialValue est utilisée pour spécifier la valeur par défaut du PopupMenuButton. L’élément sélectionné par défaut est marqué d’une coche. Cela permet d’indiquer à l’utilisateur quel élément du menu est actuellement sélectionné.

2. Détails

• Valeur par défaut : La propriété initialValue définit l’élément du menu qui est sélectionné par défaut.
• Marquage de la sélection : L’élément correspondant à la initialValue est affiché avec une coche pour indiquer qu’il est sélectionné.
• Type de valeur : La valeur passée à initialValue doit correspondre à l’une des valeurs définies dans les éléments de menu (PopupMenuItem).

3. Exemple

• Voici un exemple de comment utiliser la propriété initialValue dans un PopupMenuButton :

PopupMenuButton(
  itemBuilder: (BuildContext context) {
    return [
      PopupMenuItem(
        child: Text('Option 1'),
        value: 'option1',
      ),
      PopupMenuItem(
        child: Text('Option 2'),
        value: 'option2',
      ),
      PopupMenuItem(
        child: Text('Option 3'),
        value: 'option3',
      ),
    ];
  },
  initialValue: 'option1',  // Définit 'Option 1' comme valeur par défaut
  onSelected: (value) {
    // Saisissez ici l'action à effectuer lorsqu'un élément est sélectionné dans le menu contextuel
    print('Valeur sélectionnée : $value');
  },
);

4. La propriété tooltip

1. Description

• La propriété tooltip du PopupMenuButton est utilisée pour définir un texte explicatif qui s’affiche lorsque l’utilisateur passe le curseur sur le bouton. Cela améliore l’expérience utilisateur en fournissant des informations supplémentaires sur la fonction du bouton.

2. Détails

• exte explicatif : La propriété tooltip définit un texte qui apparaît lorsqu’on passe le curseur sur le bouton.
• Amélioration de l’UX : Fournir un tooltip aide les utilisateurs à comprendre la fonction du bouton sans avoir à cliquer dessus.

3. Exemple

• Voici un exemple de comment utiliser la propriété tooltip dans un PopupMenuButton :

PopupMenuButton(
  itemBuilder: (BuildContext context) {
    return [
      PopupMenuItem(
        child: Text('Option 1'),
        value: 'option1',
      ),
      PopupMenuItem(
        child: Text('Option 2'),
        value: 'option2',
      ),
      PopupMenuItem(
        child: Text('Option 3'),
        value: 'option3',
      ),
    ];
  },
  tooltip: 'Afficher les options',  // Définit le texte explicatif
  onSelected: (value) {
    // Saisissez ici l'action à effectuer lorsqu'un élément est sélectionné dans le menu contextuel
    print('Valeur sélectionnée : $value');
  },
);

5. La propriété elevation

1. Description

• La propriété elevation du PopupMenuButton est utilisée pour définir la hauteur d’élévation (ou la profondeur d’ombre) du menu contextuel lorsqu’il apparaît. Cela permet de donner un effet visuel de profondeur et d’ombre au menu, ce qui peut améliorer l’interface utilisateur en rendant les éléments du menu plus visibles et attrayants.

2. Détails

• Hauteur d’élévation : La propriété elevation définit l’élévation du menu contextuel en pixels. Plus la valeur est élevée, plus l’ombre est prononcée.
• Effet visuel : L’élévation ajoute une ombre au menu contextuel, donnant l’impression qu’il est au-dessus du contenu de la page.

3. Exemple

• Voici un exemple de comment utiliser la propriété elevation dans un PopupMenuButton :

PopupMenuButton(
  elevation: 8,  // Définit la hauteur d'élévation du menu contextuel
  itemBuilder: (BuildContext context) => [
    const PopupMenuItem(
      value: 'value1',
      child: Text('Item 1'),
    ),
    const PopupMenuItem(
      value: 'value2',
      child: Text('Item 2'),
    ),
    const PopupMenuItem(
      value: 'value3',
      child: Text('Item 3'),
    ),
  ],
  onSelected: (value) {
    // Saisissez ici l'action à effectuer lorsqu'un élément est sélectionné dans le menu contextuel
    print('Valeur sélectionnée : $value');
  },
);

6. La propriété icon

1. Description

• La propriété icondu PopupMenuButton est utilisée pour définir l’icône qui sera affichée pour déclencher le menu contextuel. Par défaut, le PopupMenuButton utilise une icône de points verticaux (⋮), mais vous pouvez personnaliser cette icône en utilisant la propriété icon.

2. Détails

• Personnalisation de l’icône : La propriété icon permet de spécifier une icône personnalisée pour le PopupMenuButton.
• Widget Icon : L’icône est définie en utilisant un widget Icon.

3. Exemple

• Voici un exemple de comment utiliser la propriété icon dans un PopupMenuButton :

PopupMenuButton(
  icon: Icon(Icons.more_vert),  // Définit l'icône du bouton
  itemBuilder: (BuildContext context) => [
    const PopupMenuItem(
      value: 'value1',
      child: Text('Item 1'),
    ),
    const PopupMenuItem(
      value: 'value2',
      child: Text('Item 2'),
    ),
    const PopupMenuItem(
      value: 'value3',
      child: Text('Item 3'),
    ),
  ],
  onSelected: (value) {
    // Saisissez ici l'action à effectuer lorsqu'un élément est sélectionné dans le menu contextuel
    print('Valeur sélectionnée : $value');
  },
);

7. La propriété offset

1. Description

• La propriété offset du PopupMenuButton est utilisée pour définir le décalage du menu contextuel par rapport à l’endroit où le bouton est cliqué. Cela permet de contrôler précisément où le menu contextuel apparaît à l’écran, ce qui peut être utile pour éviter qu’il ne chevauche d’autres éléments de l’interface utilisateur.

2. Détails

• Définir le décalage : La propriété offset prend un objet Offset qui définit les décalages horizontal et vertical en pixels.
• Contrôle de la position : Utiliser offset permet de positionner le menu contextuel à l’endroit souhaité, en ajustant sa position par rapport au PopupMenuButton.

3. Exemple

• Voici un exemple de comment utiliser la propriété offset dans un PopupMenuButton :

PopupMenuButton(
  offset: Offset(0, 20),  // Définit le décalage du menu contextuel
  itemBuilder: (BuildContext context) => [
    const PopupMenuItem(
      value: 'value1',
      child: Text('Item 1'),
    ),
    const PopupMenuItem(
      value: 'value2',
      child: Text('Item 2'),
    ),
    const PopupMenuItem(
      value: 'value3',
      child: Text('Item 3'),
    ),
  ],
  onSelected: (value) {
    // Saisissez ici l'action à effectuer lorsqu'un élément est sélectionné dans le menu contextuel
    print('Valeur sélectionnée : $value');
  },
);

8. La propriété shape

1. Description

• La propriété shape du PopupMenuButton est utilisée pour définir l’apparence par défaut du menu contextuel. Vous pouvez personnaliser la forme et les bordures du menu contextuel en utilisant cette propriété. Cela permet d’améliorer l’interface utilisateur en rendant les menus contextuels plus attrayants et en accord avec le thème de votre application.

2. Détails

• Personnalisation de la forme : La propriété shape permet de définir la forme du menu contextuel en utilisant des classes comme RoundedRectangleBorder, CircleBorder, etc.
• Amélioration visuelle : Personnaliser la forme du menu contextuel peut rendre l’interface utilisateur plus cohérente et visuellement plaisante.

3. Exemple

• Voici un exemple de comment utiliser la propriété shape dans un PopupMenuButton :

PopupMenuButton(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),  // Définit la forme du menu contextuel
  itemBuilder: (BuildContext context) => [
    const PopupMenuItem(
      value: 'value1',
      child: Text('Item 1'),
    ),
    const PopupMenuItem(
      value: 'value2',
      child: Text('Item 2'),
    ),
    const PopupMenuItem(
      value: 'value3',
      child: Text('Item 3'),
    ),
  ],
  onSelected: (value) {
    // Saisissez ici l'action à effectuer lorsqu'un élément est sélectionné dans le menu contextuel
    print('Valeur sélectionnée : $value');
  },
);

9. La propriété constraints

1. Description

• La propriété constraints dans un PopupMenuButton est utilisée pour spécifier des restrictions de taille qui doivent être appliquées au menu contextuel. Cela permet de contrôler la largeur et la hauteur minimales et maximales du menu, assurant ainsi une présentation cohérente et esthétique.

2. Exemple

• Voici comment utiliser la propriété constraints dans un PopupMenuButton :

PopupMenuButton(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 200,
  ),
  itemBuilder: (BuildContext context) => [
    const PopupMenuItem(
      value: 'value1',
      child: Text('Item 1'),
    ),
    const PopupMenuItem(
      value: 'value2',
      child: Text('Item 2'),
    ),
    const PopupMenuItem(
      value: 'value3',
      child: Text('Item 3'),
    ),
  ],
);

10. La propriété color

1. Description

• Dans Flutter, la propriété color dans un PopupMenuButton est utilisée pour définir la couleur d’arrière-plan du menu contextuel. Cela permet de personnaliser l’apparence visuelle du menu selon vos besoins spécifiques.

2. Détails

3. Exemple

• Voici comment utiliser la propriété color dans un PopupMenuButton :

PopupMenuButton(
  color: Colors.grey,
  itemBuilder: (BuildContext context) => [
    const PopupMenuItem(
      value: 'value1',
      child: Text('Item 1'),
    ),
    const PopupMenuItem(
      value: 'value2',
      child: Text('Item 2'),
    ),
    const PopupMenuItem(
      value: 'value3',
      child: Text('Item 3'),
    ),
  ],
);

4. Créer un PopupMenuButton

• Pour créer un PopupMenuButton, vous devez spécifier un type pour les éléments de menu. Ce type peut être n’importe quel type d’objet, mais il est généralement une chaîne de caractères ou un entier.

1. Commencez avec une structure d’application Flutter simple

• Tout d’abord, assurez-vous d’avoir configuré un environnement Flutter. Commencez avec un projet vide et mettez à jour votre fichier main.dart pour inclure la structure principale de l’application :

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Popup Menu Example'),
        ),
        body: const Center(
          child: Text('Tap the AppBar menu for options'),
        ),
      ),
    );
  }
}

2. Ajouter un PopupMenuButton à l’AppBar

• Ensuite, intégrez le PopupMenuButton dans les actions de l’AppBar :

appBar: AppBar(
  title: const Text('Flutter Popup Menu Example'),
  actions: [
    PopupMenuButton(
      onSelected: (String value) {
        // Handle your action on selection here
        print('Selected: $value');
      },
      itemBuilder: (BuildContext context) {
        return {'Option 1', 'Option 2', 'Option 3'}.map((String choice) {
          return PopupMenuItem(
            value: choice,
            child: Text(choice),
          );
        }).toList();
      },
    ),
  ],
),

• Cet extrait ajoute PopupMenuButton aux actions de l’AppBar. Le rappel itemBuilder est utilisé pour créer les éléments de menu affichés dans le menu contextuel lorsque le bouton est enfoncé. Le rappel onSelected est ensuite utilisé pour gérer l’action lorsqu’un utilisateur sélectionne un bouton ou un élément de menu contextuel.
• Cette implémentation de base introduit un menu contextuel fonctionnel dans votre application, démontrant la facilité d’ajout d’éléments interactifs avec Flutter.

5. Ajouter des éléments de menu

• Les éléments de menu sont ajoutés dans la fonction itemBuilder. Chaque élément de menu est un PopupMenuItem avec une valeur et un enfant (le widget qui sera affiché).

6. Gérer les sélections d’éléments

• En Flutter, la gestion des sélections d’éléments dans un PopupMenuButton est réalisée à l’aide de la fonction onSelected. Cette fonction est spécifiée lors de la création du PopupMenuButton et est appelée chaque fois qu’un utilisateur sélectionne un élément du menu contextuel.
• La sélection d’un élément de menu est gérée par la fonction onSelected. Cette fonction prend la valeur de l’élément sélectionné comme argument.

1. Utilisation de onSelected

• Lors de la création d’un PopupMenuButton, vous pouvez spécifier la fonction onSelected pour traiter la sélection de l’utilisateur. Cette fonction est appelée avec la valeur associée à l’élément de menu sélectionné.

2. Exemple avec onSelected

PopupMenuButton(
  itemBuilder: (BuildContext context) => [
    const PopupMenuItem(
      value: 'option1',
      child: Text('Option 1'),
    ),
    const PopupMenuItem(
      value: 'option2',
      child: Text('Option 2'),
    ),
    const PopupMenuItem(
      value: 'option3',
      child: Text('Option 3'),
    ),
  ],
  onSelected: (String value) {
    // Action à effectuer lorsque l'utilisateur sélectionne un élément
    print('Option sélectionnée : $value');
    // Vous pouvez implémenter ici toute logique de gestion basée sur la sélection
  },
);

7. Personnaliser l’apparence

• Vous pouvez personnaliser l’apparence du PopupMenuButton et de ses éléments. Par exemple, vous pouvez modifier l’icône du bouton, ajouter des icônes aux éléments de menu, ou changer le style des textes.

8. Exemple complet

• Voici un exemple complet qui montre comment utiliser un PopupMenuButton pour naviguer entre différentes pages dans une application Flutter :
• main.dart

import 'package:flutter/material.dart';
import 'home_page.dart';
import 'products_page.dart';
import 'store_page.dart';
import 'sellers_page.dart';
import 'sales_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PopupMenuButton Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/products': (context) => ProductsPage(),
        '/store': (context) => StorePage(),
        '/sellers': (context) => SellersPage(),
        '/sales': (context) => SalesPage(),
      },
    );
  }
}

• home_page.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Accueil'),
        actions: [buildMenu(context)],
      ),
      body: Center(
        child: Text('Bienvenue à la page d\'accueil!'),
      ),
    );
  }

  Widget buildMenu(BuildContext context) {
    return PopupMenuButton(
      onSelected: (String value) {
        Navigator.pushNamed(context, value);
      },
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            value: '/products',
            child: ListTile(
              leading: Icon(Icons.shopping_bag),
              title: Text('Produits'),
            ),
          ),
          PopupMenuItem(
            value: '/store',
            child: ListTile(
              leading: Icon(Icons.store),
              title: Text('Magasin'),
            ),
          ),
          PopupMenuItem(
            value: '/sellers',
            child: ListTile(
              leading: Icon(Icons.people),
              title: Text('Vendeurs'),
            ),
          ),
          PopupMenuItem(
            value: '/sales',
            child: ListTile(
              leading: Icon(Icons.attach_money),
              title: Text('Vente'),
            ),
          ),
        ];
      },
    );
  }
}

• Répétez ce processus pour les autres pages (products_page.dart, store_page.dart, sellers_page.dart, sales_page.dart).
• Exemple de products_page.dart

import 'package:flutter/material.dart';

class ProductsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Produits'),
        actions: [buildMenu(context)],
      ),
      body: Center(
        child: Text('Bienvenue à la page des produits!'),
      ),
    );
  }

  Widget buildMenu(BuildContext context) {
    return PopupMenuButton(
      onSelected: (String value) {
        Navigator.pushNamed(context, value);
      },
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            value: '/',
            child: ListTile(
              leading: Icon(Icons.home),
              title: Text('Accueil'),
            ),
          ),
          PopupMenuItem(
            value: '/store',
            child: ListTile(
              leading: Icon(Icons.store),
              title: Text('Magasin'),
            ),
          ),
          PopupMenuItem(
            value: '/sellers',
            child: ListTile(
              leading: Icon(Icons.people),
              title: Text('Vendeurs'),
            ),
          ),
          PopupMenuItem(
            value: '/sales',
            child: ListTile(
              leading: Icon(Icons.attach_money),
              title: Text('Vente'),
            ),
          ),
        ];
      },
    );
  }
}

• store_page.dart

import 'package:flutter/material.dart';

class StorePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Magasin'),
        actions: [buildMenu(context)],
      ),
      body: Center(
        child: Text('Bienvenue à la page du magasin!'),
      ),
    );
  }

  Widget buildMenu(BuildContext context) {
    return PopupMenuButton(
      onSelected: (String value) {
        Navigator.pushNamed(context, value);
      },
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            value: '/',
            child: ListTile(
              leading: Icon(Icons.home),
              title: Text('Accueil'),
            ),
          ),
          PopupMenuItem(
            value: '/products',
            child: ListTile(
              leading: Icon(Icons.shopping_bag),
              title: Text('Produits'),
            ),
          ),
          PopupMenuItem(
            value: '/sellers',
            child: ListTile(
              leading: Icon(Icons.people),
              title: Text('Vendeurs'),
            ),
          ),
          PopupMenuItem(
            value: '/sales',
            child: ListTile(
              leading: Icon(Icons.attach_money),
              title: Text('Vente'),
            ),
          ),
        ];
      },
    );
  }
}

• sellers_page.dart

import 'package:flutter/material.dart';

class SellersPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Vendeurs'),
        actions: [buildMenu(context)],
      ),
      body: Center(
        child: Text('Bienvenue à la page des vendeurs!'),
      ),
    );
  }

  Widget buildMenu(BuildContext context) {
    return PopupMenuButton(
      onSelected: (String value) {
        Navigator.pushNamed(context, value);
      },
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            value: '/',
            child: ListTile(
              leading: Icon(Icons.home),
              title: Text('Accueil'),
            ),
          ),
          PopupMenuItem(
            value: '/products',
            child: ListTile(
              leading: Icon(Icons.shopping_bag),
              title: Text('Produits'),
            ),
          ),
          PopupMenuItem(
            value: '/store',
            child: ListTile(
              leading: Icon(Icons.store),
              title: Text('Magasin'),
            ),
          ),
          PopupMenuItem(
            value: '/sales',
            child: ListTile(
              leading: Icon(Icons.attach_money),
              title: Text('Vente'),
            ),
          ),
        ];
      },
    );
  }
}

• sales_page.dart

import 'package:flutter/material.dart';

class SalesPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Vente'),
        actions: [buildMenu(context)],
      ),
      body: Center(
        child: Text('Bienvenue à la page des ventes!'),
      ),
    );
  }

  Widget buildMenu(BuildContext context) {
    return PopupMenuButton(
      onSelected: (String value) {
        Navigator.pushNamed(context, value);
      },
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            value: '/',
            child: ListTile(
              leading: Icon(Icons.home),
              title: Text('Accueil'),
            ),
          ),
          PopupMenuItem(
            value: '/products',
            child: ListTile(
              leading: Icon(Icons.shopping_bag),
              title: Text('Produits'),
            ),
          ),
          PopupMenuItem(
            value: '/store',
            child: ListTile(
              leading: Icon(Icons.store),
              title: Text('Magasin'),
            ),
          ),
          PopupMenuItem(
            value: '/sellers',
            child: ListTile(
              leading: Icon(Icons.people),
              title: Text('Vendeurs'),
            ),
          ),
        ];
      },
    );
  }
}

9. Conclusion

• Le PopupMenuButton est un widget puissant et flexible pour afficher des options contextuelles dans Flutter. En comprenant comment créer et personnaliser ce widget, vous pouvez améliorer l’expérience utilisateur dans vos applications. Avec les exemples et les explications de ce tutoriel, vous devriez être en mesure d’implémenter et de personnaliser des PopupMenuButton dans vos propres projets Flutter.