AlertDialog in Flutter erstellen

Achtung!!!

Du stehst kurz davor etwas Unwiderrufliches zu tun! Bist du dir sicher, dass du das wirklich löschen willst? Hast du dir das gut überlegt?

Wäre ich eine App würde ich dich jetzt mit AlertDialogs bombardieren.

Bin ich aber nicht. Also wenn du Flutter lernen möchtest, zeige ich dir, wie du AlertDialogs in einer Flutter-App einbauen kannst.

Was sind AlertDialogs?

Zunächst einmal müssen wir ein paar Sachen definieren. Ein AlertDialog ist eine Unterklasse von Dialog. Dialog hat die Unterklassen SimpleDialog und AlertDialog.

In einem SimpleDialog hat man meist verschiedene Optionen in Form einer Auswahl zur Verfügung.

Im Gegensatz dazu steht ein AlertDialog. Dieser braucht eine Bestätigung, dass eine bestimmte Aktion durchgeführt werden soll, oder nicht.

In diesem Artikel gehen wir genauer auf AlertDialogs ein. Um einen AlertDialog aufzurufen, müssen wir zunächst die showDialog()Methode aufrufen. Diese benötigt zum einen den context und zum anderen einen itemBuilder, der als Rückgabewert einen Typ von Dialog zurückgibt. In unserem Fall einen AlertDialog.

 void _showAlertDialog(){
    showDialog(
      context: context,
      builder: (BuildContext context){
        return AlertDialog()
      },
    );
  }

Dieses Beispiel zeigt uns erstmal nichts, da wir den Dialog noch nicht gefüllt haben. Wir müssen dem Dialog also mindestens einen title geben, um einen visuellen Dialog zu sehen.

void _showAlertDialog(){
    showDialog(
      context: context,
      builder: (BuildContext context){
        return AlertDialog(
          title: Text('Alert!'),
        ),
      },
    );
  }

Diese Animation zeigt nochmal das Aufrufen des leeren Dialogs und einmal den Dialog mit

.

Bestandteile von AlertDialogs

Damit der Dialog schön aussieht und dem Nutzer auch etwas bringt, sollten wir ihn mit mehr Attributen füllen und den Nutzer nicht mit dem Titel allein lassen.

Über den content Parameter können wir den Nutzer darüber informieren, was tatsächlich gerade passiert. Der actions Parameter erwartet eine Liste von beliebig vielen Widgets. Allerdings sollte man sich, im Sinne der Benutzerfreundlichkeit, auf maximal zwei Buttons beschränken. Welche properties der Konstruktor des AlertDialogs noch aufnimmt, könnt ihr hier nachlesen.

return AlertDialog(
          title: Text('Alert!'),
          content: Text('Bitte Aktion bestätigen.'),
          actions: <Widget>[
            TextButton(
              child: Text('Abbrechen'),
              onPressed: (){
                // Hier passiert etwas
                Navigator.of(context).pop();
              }
            ),
            TextButton(
              child: Text('Bestätigen'),
              onPressed: (){
                // Hier passiert etwas anderes
                Navigator.of(context).pop();
              },
            ),
          ],
        );

Where’s the beauty? alertDialog stylen

Nun ist der AlertDialog zu sehen und die Funktionalität ist gegeben. Aber geht da noch mehr? Klar!

Natürlich können wir bei jedem Text auch den style nach Belieben verändern. Außerdem können wir über den Parameter elevation bestimmen, wie stark der Dialog hervorgehoben wird und wie viel Schatten er werfen soll. Natürlich dürfen bei einer schönen Dialogbox auch keine scharfen Ecken rein. Mit shape bekommt auch eine Dialogbox schöne Kurven.

return AlertDialog(
          title: Text('Alert!', style: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold, 
            fontStyle: FontStyle.italic, color: Colors.green[900])),
          content: Text('Bitte Aktion bestätigen.', style: TextStyle(color: Colors.purple),),
          backgroundColor: Colors.yellow,
          actions: <Widget>[
            TextButton(
              child: Text('Abbrechen'),
              style: ButtonStyle(
                textStyle: MaterialStateProperty.all(
                  TextStyle(
                    color: Colors.blue[100],
                  ),
                ),
              ),
              onPressed: () {
                _counterZero();
                Navigator.of(context).pop();
              },
            ),
            TextButton(
              style: ButtonStyle(
                shape: MaterialStateProperty.all(
                  RoundedRectangleBorder(
                      side: BorderSide(color: Colors.orange[800], width: 2.0),
                      borderRadius: BorderRadius.circular(30.0)),
                ),
              ),
              child: Text('Bestätigen'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
          elevation: 0.0, 
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),
          ),
        );

Okay zugegeben, wirklich schön ist er nicht, aber er zeigt was so alles möglich ist. 😄

Du findest dieses Projekt auch hier auf Github.