Zum Hauptinhalt springen

Flutter AlertDialog Tutorial und Beispiele

In diesem Tutorial werden wir uns mit den Möglichkeiten der Erstellung von AlertDialogen in Flutter beschäftigen. Dies beinhaltet die Erstellung von Dialogen mit oder ohne Drittanbieter-Pakete.

Was ist ein AlertDialog?

Ein Alert-Dialog informiert den Benutzer über Situationen, die eine Quittierung erfordern.

Was ist Flutter?​

*Flutter ist Googles SDK für mobile Apps, mit dem sich hochwertige native Oberflächen für iOS und Android in Rekordzeit erstellen lassen.

Flutter funktioniert mit bestehendem Code, wird von Entwicklern und Organisationen auf der ganzen Welt verwendet und ist kostenlos und quelloffen.

Beispiel 1: Flutter Simple AlertDialog Beispiel​

Schauen wir uns ein einfaches Flutter AlertDialog Beispiel mit Titel und Beschreibungen an. In diesem Beispiel wird zuerst ein flacher Button gerendert, der, wenn der Benutzer ihn drückt oder anklickt, einen Alertdialog öffnet. In diesem Beispiel verwenden wir keine Bibliothek eines Drittanbieters.

Hier ist die Anwendung im Querformat:

Video-Tutorial (ProgrammingWizards TV Channel)​

Nun, wir haben ein Video-Tutorial als Alternative zu diesem. Wenn Sie Tutorials wie dieses bevorzugen, dann wäre es gut, wenn Sie unseren YouTube-Kanal abonnieren. Im Grunde genommen haben wir ein TV für die Programmierung, wo wir täglich Tutorials speziell für Android machen.

Hier sind die Dateien, die wir untersuchen:

  1. pubspec.yaml
  2. lib/main.dart

Schritt 1: Abhängigkeiten​

Flutter unterstützt die Verwendung von gemeinsam genutzten Paketen, die von anderen Entwicklern zum Flutter- und Dart-Ökosystem beigetragen wurden. Dies ermöglicht es Ihnen, Ihre Anwendung schnell zu erstellen, ohne alles von Grund auf neu entwickeln zu müssen.

Wir werden Pakete unter dieser Datei hinzufügen.

  1. Öffnen Sie die Datei pubspec.yaml, die sich in Ihrem App-Ordner befindet, und fügen Sie Abhängigkeiten unter dependencies hinzu.
  2. Wenn es sich um eine Drittpartei handelt, müssen Sie diese installieren.
    Über das Terminal: Führen Sie flutter packages get aus

ODER

Von Android Studio/IntelliJ aus: Klicken Sie auf "Packages Get" im Aktionsband oben in der pubspec.yaml
Von VS Code aus: Klicken Sie auf 'Get Packages' auf der rechten Seite des Aktionsbands oben in der pubspec.yaml

Flutter ist immer unsere SDK-Abhängigkeit, da wir es für die Entwicklung unserer iOS- und Android-Apps verwenden.

name: mr_alert_dialog
description: A new Flutter project.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://www.dartlang.org/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

Wie Sie sehen können, haben wir die Standardpakete verwendet und keine Bibliothek von Drittanbietern.

Schritt 2: Code schreiben​

In main.dart schreiben wir unseren Flutter-Code in der Programmiersprache Dart. In Dart ist es sehr üblich, mehrere Klassen in eine einzige Datei zu schreiben. Diese einfache Datei wird also drei Klassen enthalten.

1. Wie man Pakete in Flutter/Dart
Aber zuerst müssen wir einige Pakete importieren und das tun wir mit dem import Schlüsselwort in Dart.

import 'package:flutter/material.dart';

Hier sind die Pakete, die wir importieren:

  1. material.dart : gibt uns Material Design Widgets und Theme.

2. Wie man Klassen in Flutter/Dart
In Dart wird, wie in den meisten Programmiersprachen im C-Stil, eine Klasse mit dem Schlüsselwort "class" erstellt. Klassen sind ein Kapselungsmechanismus in objektorientierten Programmiersprachen.

In diesem Fall erstellen wir drei Klassen:

class MyApp extends StatelessWidget {..}
class Home extends StatefulWidget {..}

Unsere erste Klasse ist eine Ableitung von StatelessWidget und implementiert die Methode build(). Diese Methode wird ein MaterialApp-Widget mit Titel, Home und Theme erstellen und es als Widget zurückgeben.

Die zweite Klasse wird von StatefulWidget abgeleitet und überschreibt die Methode createState().

Hier ist der vollständige Quellcode:

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter AlertDialog',
      home: Scaffold(
        appBar: AppBar(
          title: Text("AlertDialog Example"),
        ),
        body: Home(),
      ),
      theme: new ThemeData(primaryColor: Colors.orange),
    );
  }
}

class Home extends StatelessWidget {
  /**
  Comstruct our widget and return it.
   */
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              // return object of type AlertDialog
              return AlertDialog(
                title: new Text("AlertDialog Class"),
                content: new Text("Creates an alert dialog.Typically used in conjunction with showDialog."+
                "The contentPadding must not be null. The titlePadding defaults to null, which implies a default."),
                actions: <Widget>[
                  // usually buttons at the bottom of the dialog
                  new FlatButton(
                    child: new Text("Close"),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              );
            },
          );
        },
        child: Text('Show AlertDialog'),
      ),
    );
  }
}

void main() {
  runApp(new MyApp());
}

//end

Ausführen von Flutter-Anwendungen​

Stellen Sie einfach sicher, dass Ihr Gerät oder Emulator läuft und klicken Sie auf die Schaltfläche "Ausführen" in [android studio] (https://camposha.info/android/android-studio), es wird automatisch das Gerät auswählen und die App installieren.

Aletrnativ können Sie das Terminal oder die Eingabeaufforderung verwenden. Navigieren Sie zur Projektstammseite und geben Sie Folgendes ein:

flutter.bat build apk

Damit wird die APK erstellt, die Sie dann auf Ihr Gerät ziehen und installieren können. Der Build-Prozess dauert bei mir etwa drei Minuten, was nicht schlecht ist.

Beispiel 2: Flutter-Bestätigungsdialog​

import 'package:flutter/material.dart';

void main(){ runApp(new MaterialApp(
  home: new MyApp(),
));
}

enum MyDialogueAction{
  yes,
  no,
  maybe
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  String _text = '';
  void _onChange(String value) {
    setState((){
      _text = value;
    });
  }

  void _dialogueResult(MyDialogueAction value){
    print('you selected $value');
    Navigator.pop(context);
  }

 void _showAlert(String value){
  showDialog(
    context: context,
    builder: (_) => new AlertDialog(
      title: new Text('Alert!'),
      content: new Text(value,
      style: new TextStyle(fontSize: 30.0),),
      actions: <Widget>[
        new FlatButton(onPressed: () {_dialogueResult(MyDialogueAction.yes);}, child: new Text('yes')),
        new FlatButton(onPressed: () {_dialogueResult(MyDialogueAction.no);}, child: new Text('no')),
      ],
    )
  );
}
  @override
  Widget build (BuildContext context){
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Alert Demo'),
      ),body: new Container(
        child: new Column(
          children: <Widget>[
            new TextField(onChanged: (String value){ _onChange(value);},),
            new RaisedButton(
              onPressed: (){_showAlert(_text);},
              child: new Text('Press me'),
            )
          ],
        ),
      ),
    );
  }
}

Beispiel 3: Animierter, Giffy Dialog Beispiel​

Wenn Sie etwas mehr mit Ihren Bestätigungsdialogen machen wollen, dann müssen Sie Drittanbieter-Pakete wie dieses verwenden.

Giffy Dialog ist ein schöner und benutzerdefinierter Warndialog für Flutter, der stark von FancyAlertDialog-Android inspiriert ist.

Der Quellcode ist 100% Dart, und alles befindet sich im Ordner /lib.

Durch diese Lösung können Sie gif-Bild-Dialog-Header lokal oder remote aus dem Netzwerk laden.

Hier ist eine Demo dieses Dialogs im Einsatz:

Network

Schritt 1: Installieren​

Fügen Sie in Ihrer pubspec.yaml dieses Paket als Abhängigkeit hinzu:

dependencies:
  giffy_dialog: 1.8.0

flutter pub get um es zu holen.

Schritt 2: Bilder vorbereiten​

Fügen Sie einige Bilder in den Assets-Ordner ein oder bereiten Sie Bild-URLs vor.

Schritt 3: Code schreiben​

Beginnen Sie mit dem Importieren von giffy_dialog:

import 'package:giffy_dialog/giffy_dialog.dart';

So erstellen Sie einen Dialog mit einem aus dem Netz geladenen Kopfbild:

onPressed: () {
  showDialog(
  context: context,builder: (_) => NetworkGiffyDialog(
    imageUrl:"https://raw.githubusercontent.com/Shashank02051997/
              FancyGifDialog-Android/master/GIF's/gif14.gif",
    title: Text('Granny Eating Chocolate',
            textAlign: TextAlign.center,
            style: TextStyle(
            fontSize: 22.0,
            fontWeight: FontWeight.w600)),
    description:Text('This is a granny eating chocolate dialog box.
          This library helps you easily create fancy giffy dialog',
          textAlign: TextAlign.center,
        ),
    entryAnimation: EntryAnimation.BOTTOM_TOP,
    onOkButtonPressed: () {},
  ) );
}

Und so erstellen Sie einen Dialog mit einem aus dem Assets-Ordner geladenen Header-Bild:

onPressed: () {
  showDialog(
  context: context,builder: (_) => AssetGiffyDialog(
    imagePath: 'assets/men_wearing_jacket.gif',
    title: Text('Men Wearing Jackets',
            style: TextStyle(
            fontSize: 22.0, fontWeight: FontWeight.w600),
    ),
    description: Text('This is a men wearing jackets dialog box.
          This library helps you easily create fancy giffy dialog.',
          textAlign: TextAlign.center,
          style: TextStyle(),
        ),
    entryAnimation: EntryAnimation.RIGHT_LEFT,
    onOkButtonPressed: () {},
  ) );
}

Asset

Full Example​

Installieren Sie zunächst die Bibliothek wie oben beschrieben.

Dann ersetzen Sie Ihre main.dart durch den folgenden Code:

main.dart

import 'package:flutter/material.dart';
import 'package:giffy_dialog/giffy_dialog.dart';

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

const List<Key> keys = [
  Key("Network"),
  Key("NetworkDialog"),
  Key("Flare"),
  Key("FlareDialog"),
  Key("Asset"),
  Key("AssetDialog")
];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Giffy Dialog Demo',
      theme: ThemeData(primarySwatch: Colors.teal, fontFamily: 'Nunito'),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Giffy Dialog Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
                key: keys[0],
                color: Colors.teal,
                child: Text(
                  "Network Giffy",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (_) => NetworkGiffyDialog(
                            key: keys[1],
                            image: Image.network(
                              "https://raw.githubusercontent.com/Shashank02051997/FancyGifDialog-Android/master/GIF's/gif14.gif",
                              fit: BoxFit.cover,
                            ),
                            entryAnimation: EntryAnimation.TOP_LEFT,
                            title: Text(
                              'Granny Eating Chocolate',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  fontSize: 22.0, fontWeight: FontWeight.w600),
                            ),
                            description: Text(
                              'This is a granny eating chocolate dialog box. This library helps you easily create fancy giffy dialog.',
                              textAlign: TextAlign.center,
                            ),
                            onOkButtonPressed: () {},
                          ));
                }),
            RaisedButton(
                key: keys[2],
                color: Colors.teal,
                child: Text(
                  'Flare Giffy',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (_) => FlareGiffyDialog(
                            key: keys[3],
                            flarePath: 'assets/space_demo.flr',
                            flareAnimation: 'loading',
                            title: Text(
                              'Space Reloading',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  fontSize: 22.0, fontWeight: FontWeight.w600),
                            ),
                            entryAnimation: EntryAnimation.DEFAULT,
                            description: Text(
                              'This is a space reloading dialog box. This library helps you easily create fancy flare dialog.',
                              textAlign: TextAlign.center,
                              style: TextStyle(),
                            ),
                            onOkButtonPressed: () {},
                          ));
                }),
            RaisedButton(
                key: keys[4],
                color: Colors.teal,
                child: Text(
                  'Asset Giffy',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (_) => AssetGiffyDialog(
                            key: keys[5],
                            image: Image.asset(
                              'assets/men_wearing_jacket.gif',
                              fit: BoxFit.cover,
                            ),
                            title: Text(
                              'Men Wearing Jackets',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  fontSize: 22.0, fontWeight: FontWeight.w600),
                            ),
                            entryAnimation: EntryAnimation.BOTTOM_RIGHT,
                            description: Text(
                              'This is a men wearing jackets dialog box. This library helps you easily create fancy giffy dialog.',
                              textAlign: TextAlign.center,
                              style: TextStyle(),
                            ),
                            onOkButtonPressed: () {},
                          ));
                }),
          ],
        ),
      ),
    );
  }
}

Referenz​

Hier sind die Referenzlinks:

---