Einen „einfachen Dialog“ in Flutter anzuzeigen, ist nicht so einfach, wie es sich anhört. Wieso den? Denn das SimpleDialog Widget wird als untergeordnetes Widget an die Funktion showDialog übergeben. Ohne die Hilfe der Funktion showDialog können wir das SimpleDialog Widget nicht anzeigen.
Wir werden die Funktion showDialog gleich besprechen. Lassen Sie uns vorher versuchen zu verstehen, was das SimpleDialog-Widget ist.
Erstens ist es ein einfaches Material Design Widget, das Benutzern die Wahl zwischen mehreren Optionen bietet.
Zweitens hat das SimpleDialog Widget einen optionalen Titel, der sich über den Auswahlmöglichkeiten positioniert.
Schließlich repräsentiert das SimpleDialogOption-Widget die Auswahlmöglichkeiten. Daher können wir das SimpleDialogOption-Widget als Erweiterung des SimpleDialog verwenden.
Obwohl die Leute oft zwischen dem SimpleDialog Widget und dem AlertDialog Widget verwechseln, unterscheidet sich der Zweck.
Das AlertDialog Widget informiert den Benutzer über eine Situation. Und das SimpleDialog Widget bietet Benutzern mehrere Auswahlmöglichkeiten.
In Bezug auf diese Diskussion können Sie den vorherigen Artikel zum Alert-Dialog lesen.
Sehen wir uns an, wie das SimpleDialog-Widget aussieht. Außerdem, wie dieses Widget den Benutzern Auswahlmöglichkeiten bietet.
Hier ist ein Bildschirm oder eine Homepage, auf der wir aufgefordert werden, einen Autor auszuwählen.
Was sehen wir, wenn wir unten auf die schwebende Aktionstaste drücken?
Das Widget bietet dem Benutzer mehrere Auswahlmöglichkeiten. Wir können nach oben und unten scrollen, um die gesamte Liste der Autoren zu sehen. Darüber hinaus können wir auf einen von ihnen klicken, um die Details anzuzeigen.
Wenn wir auf einen von ihnen klicken, gelangen wir wieder zurück zur Startseite.
Tatsächlich haben wir der Einfachheit halber diesen Weg gewählt. Andernfalls kann jedes Element der Liste einen separaten Bildschirm enthalten.
Die Funktion „showDialog()“ gibt ein Future zurück, das sich beim Schließen des Dialogs in den Wert auflöst, den wir an Navigator.pop übergeben haben.
Was ist Dialog im Flattern?
Wie wir im obigen Bild sehen, wird der Inhalt unten abgeblendet, wenn das SimpleDialog-Widget angezeigt wird. Dies geschieht aufgrund der ModalBarrier. Und die Funktion „showDialog()“ baut das Dialog-Widget mit Hilfe von builder.
Sehen wir uns jetzt den Code an. Zuerst erstellen wir die Klasse „Writer“ im Model-Ordner.
class Writer {
String name;
Writer(this.name);
}Als Nächstes benötigen wir ein benutzerdefiniertes StatefulWidget, da das Dialog-Widget dynamisch aktualisiert werden muss.
import 'package:flutter/material.dart';
import 'package:flutter_artisan/model/writer.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Writer? selectedwriter;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter SimpleDialog Example'),
),
body: Center(
child: Text(
'Selected writer: ' +
(selectedwriter == null ? 'Not Seleted.' : selectedwriter!.name),
style: Theme.of(context).textTheme.headline3,
),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
showMySimpleDialog(context);
},
label: Text(
'Select a writer',
style: Theme.of(context).textTheme.headline4,
),
),
);
}
void showMySimpleDialog(BuildContext context) {
var writers = [
Writer('Rabindranath Tagore'),
Writer('Leo Tolstoy'),
Writer('Ernest Hemingway'),
Writer('George Simone'),
Writer('James Hadley Chase'),
Writer('Arthur Conan Doyele'),
];
Future futureValue = showDialog(
context: context,
builder: (BuildContext context) {
return SimpleDialog(
//title: const Text('Select a writer:'),
children: writers
.map(
(writer) => SimpleDialog(
children: [
TextButton(
onPressed: () {
Navigator.pop(context, writer);
},
child: Text(writer.name),
),
],
),
)
.toList(),
);
},
);
futureValue.then(
(writer) => {
setState(() {
selectedwriter = writer;
})
},
);
}
}
Im ersten Fall haben wir das SimpleDialog Widget mit einem anderen Simple Dialog Widget umhüllt.
Wenn wir das Simple Dialog Widget mit einem ListView Widget umschließen, kann uns das auch beim Scrollen helfen.
Dadurch ändert sich das Aussehen.
Den vollständigen Codeausschnitt finden Sie im GitHub-Repository.
Leave a Reply