Flutter: AlertDialog verwenden und anpassen

AlertDialog ist ein Popup, mit dem wir Hinweise anzeigen oder Bestätigungen von Nutzern einholen können. Es bleibt auf dem Bildschirm, bis es geschlossen wird, und blockiert die Interaktion mit dem dahinterliegenden Inhalt.

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

Zum Anzeigen eines AlertDialog wird die Funktion showDialog verwendet:

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('Title'),
      content: Text('Content text'),
      actions: [
        TextButton(
          onPressed: () => Navigator.of(context).pop(),
          child: Text('OK'),
        ),
      ],
    );
  },
);

Bestätigungsdialog

So holen Sie eine Bestätigung vom Nutzer ein:

Future<void> _showConfirmDialog() async {
  final result = await showDialog<bool>(
    context: context,
    builder: (context) => AlertDialog(
      title: Text('Delete Confirmation'),
      content: Text('Do you want to delete this item?'),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context, false),
          child: Text('NO'),
        ),
        TextButton(
          onPressed: () => Navigator.pop(context, true),
          child: Text('YES'),
        ),
      ],
    ),
  );
  
  if (result == true) {
    // Delete operation
  }
}

Eingaben erfassen

Daten mit einem TextField vom Nutzer erfassen:

final controller = TextEditingController();

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: Text('Enter Name'),
    content: TextField(
      controller: controller,
      decoration: InputDecoration(hintText: 'Your name...'),
    ),
    actions: [
      TextButton(
        onPressed: () => Navigator.pop(context),
        child: Text('CANCEL'),
      ),
      TextButton(
        onPressed: () => Navigator.pop(context, controller.text),
        child: Text('SAVE'),
      ),
    ],
  ),
);

Wichtige Eigenschaften

Eigenschaft	Beschreibung
title	Titel des Dialogs
content	Inhalt des Dialogs
actions	Buttons am unteren Rand
shape	Form des Dialogs
backgroundColor	Hintergrundfarbe
barrierDismissible	Schließen bei Tippen außerhalb

barrierDismissible

So verhindern Sie das Schließen beim Tippen außerhalb des Dialogs:

showDialog(
  context: context,
  barrierDismissible: false, // Won't close when tapping outside
  builder: (context) => AlertDialog(
    title: Text('Required Selection'),
    content: Text('You must select an option'),
    actions: [...],
  ),
);

Zusammenfassung

• AlertDialog: Modales Popup-Fenster
• showDialog: Dient zum Anzeigen des Dialogs
• Navigator.pop(): Schließt den Dialog und gibt einen Wert zurück
• barrierDismissible: Steuert das Verhalten beim Tippen außerhalb
• actions: Enthält die Buttons des Dialogs

AlertDialog ist ein grundlegendes Werkzeug für Bestätigungen und Hinweise an Nutzer.