Einfacher Alarm Dialog mit Flutter

Eine Anwendung kann immer vor der Situation  stehen, das der Anwender eine kritische Handlung  vornimmt. Sei es, das er etwas löscht, oder eine  Grundeinstellung der Anwendung ändert.

Oft wird in so einem Fall ein Dialog angezeigt, der den Anwender explizit zwingt seine Handlung zu bestätigen, oder im Falle eines Irrtums, sie zu verwerfen.

Das Flutter SDK liefert hierzu von Haus aus ein Widget, mit dem wir diese Problemstellung lösen können: AlertDialog(...) .

Dieser Dialog hat große Ähnlichkeit mit einem Card(...) Widget, welches wir vor kurzem in diesem Blog betrachtet haben.

Die drei Hauptbestandteile

Dieser Dialog besteht aus drei Komponenten:

title: Die Fragestellung an den Anwender: Beispiel: App wirklich zurücksetzten ?

content: Eine ausführliche Information, wieso die Fragestellung wichtig ist.

actions: Hier hat der Anwender die Möglichkeit fortzufahren, oder abzubrechen. 

Was macht diesen AlertDialog speziell ?

Dieser Dialog unterbricht den Anwender und schwebt über den sonstigen Elementen der Anwendung ! Das wiederum heisst, man sollte ihn sparsam und nur wenn notwendig einsetzen. 

Der Code

Um den AlertDialog zu demonstrieren benötigen wir zuerst einmal einen Button:

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

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: const Text('Elevated Button'),
      style:ElevatedButton.styleFrom(
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(20.0),
            )
        ),
      ),
    );
  }
}

Beachte bitte dabei onPressed: . Im Code oben wird noch eine Dummy Funktion übergeben, die genau...nichts macht !

Für onPressed: können wir jetzt die Funktion schreiben, die den AlertDialog anzeigt.

void zeigeAlarmDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text('Achtung! Achtung !'),
        content: const Text('Alarm Dialog !!'),
        actions: <Widget>[
           TextButton(
            child: const Text("OK"),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

Der Code oben zeigt eine einfache Version, die aber schon die wichtigsten Punkte enthält.

showDialog(...) wird benötigt um einen AlertDialog zu implementieren. Diese Funktion kommt nicht ausschließlich für AlertDialog zum Einsatz.  

Sie benötigt einen context als Parameter. builder: müssen wir die Funktion übergeben die den AlertDialog implementiert. Diese Funktion erwartet ebenfalls einen context als Parameter.

Die builder: Funktion hat als Inhalt return AlertDialog(....). Das AlertDialog Widget ist einfach zu verstehen. title: , content: , actions: habe ich weiter oben schon erwähnt. actions: wird ein TextButton übergeben, der wenn er aktiviert wird, den Dialog schließt.

Dabei erhält actions: eine Widget Liste, was aufzeigt, das auch mehr als ein Button möglich sind.

Alarm Dialog

Ich gehe hier nicht weiter auf Navigator.of(...) ein. Das ist ein Thema für einen eigenständigen Post. Sehr vereinfacht gesprochen organisiert der Navigator mögliche Bildschirme als Stapel. Mit .pop kehren wir zum letzten aktiven Bildschirm zurück. 

Werfen wir aber einen Blick auf den gesamten Screen:

Der restliche Bildschirm ist abgedunkelt. Natürlich kannst Du Einfluss nehmen auf die Farbe.

void zeigeAlarmDialog(BuildContext context) {
  showDialog(
    context: context,
    barrierColor: Colors.green.withOpacity(0.3),
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text('Achtung! Achtung !'),
        content: const Text('Alarm Dialog !!'),
        actions: <Widget>[
           TextButton(
            child: const Text("OK"),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

Im Code oben übergeben wir der showDialog(...) Funktion neu den Parameter barrierColor:. Hier ist zu beachten, das wenn man .withOpacity(...) weglässt, der Hintergrund gänzlich durch die entsprechende Farbe überdeckt wird !

Bis bald 😀