Flutter: PopupMenuButton verwenden und Menüstrukturen

PopupMenuButton ist ein Menü, das Nutzern die Bedienung erleichtert und erst durch eine Aktion sichtbar wird. Menüs bestehen aus Einträgen, und jeder Eintrag muss einen Wert besitzen. Andernfalls können wir das Klickereignis nicht auswerten.

Live-Demo

Sie können dieses Widget im interaktiven Beispiel unten ausprobieren:

💡 Falls das Beispiel oben nicht lädt, klicken Sie auf DartPad, um es in einem neuen Tab auszuführen.

Grundlegende Verwendung

PopupMenuButton<String>(
  onSelected: (String value) {
    print('Selected: $value');
  },
  itemBuilder: (BuildContext context) => [
    PopupMenuItem<String>(
      value: 'edit',
      child: Text('Edit'),
    ),
    PopupMenuItem<String>(
      value: 'delete',
      child: Text('Delete'),
    ),
  ],
)

Verwendung mit Enum

Für Typsicherheit empfiehlt sich der Einsatz eines Enums:

enum MenuAction { edit, delete, share }

PopupMenuButton<MenuAction>(
  onSelected: (MenuAction action) {
    switch (action) {
      case MenuAction.edit:
        // Edit operation
        break;
      case MenuAction.delete:
        // Delete operation
        break;
      case MenuAction.share:
        // Share operation
        break;
    }
  },
  itemBuilder: (context) => [
    PopupMenuItem(value: MenuAction.edit, child: Text('Edit')),
    PopupMenuItem(value: MenuAction.delete, child: Text('Delete')),
    PopupMenuItem(value: MenuAction.share, child: Text('Share')),
  ],
)

Menüeinträge mit Symbolen

PopupMenuItem<String>(
  value: 'settings',
  child: Row(
    children: [
      Icon(Icons.settings),
      SizedBox(width: 10),
      Text('Settings'),
    ],
  ),
)

PopupMenuDivider

So fügen Sie eine Trennlinie zwischen Menüeinträgen ein:

itemBuilder: (context) => [
  PopupMenuItem(value: 'edit', child: Text('Edit')),
  PopupMenuItem(value: 'copy', child: Text('Copy')),
  PopupMenuDivider(), // Separator line
  PopupMenuItem(value: 'delete', child: Text('Delete')),
]

Wichtige Eigenschaften

Eigenschaft	Beschreibung
onSelected	Wird aufgerufen, wenn ein Eintrag gewählt wird
itemBuilder	Erzeugt die Menüeinträge
icon	Symbol des Menü-Buttons
child	Eigenes Button-Widget
offset	Versatz der Menüposition
shape	Form des Menüs
color	Hintergrundfarbe des Menüs
enabled	Menü aktiv oder inaktiv

Verwendung mit eigenem Button

PopupMenuButton<String>(
  child: Container(
    padding: EdgeInsets.all(12),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Row(
      children: [
        Text('Menu', style: TextStyle(color: Colors.white)),
        Icon(Icons.arrow_drop_down, color: Colors.white),
      ],
    ),
  ),
  itemBuilder: (context) => [...],
)

Zusammenfassung

• PopupMenuButton: Erzeugt ein Dropdown-Menü
• PopupMenuItem: Steht für einen Menüeintrag
• value: Eindeutiger Wert je Eintrag (erforderlich)
• onSelected: Wird bei einer Auswahl ausgelöst
• PopupMenuDivider: Trennlinie zwischen Einträgen

PopupMenuButton eignet sich ideal, um Nutzern kontextbezogene Optionen anzubieten.