Afficher une « boîte de dialogue simple » dans Flutter n’est pas aussi simple qu’il y paraît. Pourquoi? Parce que le Widget SimpleDialog est passé en tant que Widget enfant à la fonction showDialog. Sans l’aide de la fonction showDialog, nous ne pouvons pas afficher le Widget SimpleDialog.
Nous allons discuter de la fonction showDialog dans une minute. Avant cela, essayons de comprendre ce qu’est le Widget SimpleDialog.
Tout d’abord, il s’agit d’un simple widget de conception de matériaux qui offre aux utilisateurs le choix entre plusieurs options.
Deuxièmement, le widget SimpleDialog a un titre facultatif qui se positionne au-dessus des choix.
Enfin, le widget SimpleDialogOption représente les choix. Par conséquent, nous pouvons utiliser le widget SimpleDialogOption comme une extension de SimpleDialog.
Bien que les gens confondent souvent le widget SimpleDialog et le widget AlertDialog, le but diffère.
Le widget AlertDialog informe l’utilisateur d’une situation. Et le widget SimpleDialog offre aux utilisateurs plusieurs choix.
En référence à cette discussion, vous pouvez lire l’article précédent sur la boîte de dialogue d’alerte.
Voyons à quoi ressemble le widget SimpleDialog. De plus, comment ce widget offre des choix aux utilisateurs.
Voici un écran ou une page d’accueil qui nous demande de sélectionner un écrivain.
Lorsque nous appuyons sur le bouton d’action flottant ci-dessous, que voyons-nous ?
Le Widget offre à l’utilisateur plusieurs choix. Nous pouvons faire défiler vers le haut et vers le bas pour voir la liste complète des écrivains. De plus, nous pouvons cliquer sur l’un d’eux pour voir les détails.
Si nous cliquons sur l’un d’eux, cela nous ramène à nouveau à la page d’accueil.
En fait, par souci de simplicité, nous avons fait de cette façon. Sinon, chaque élément de la liste peut contenir un écran séparé.
La fonction « showDialog() » renvoie un futur qui se résout à la valeur que nous avons transmise à Navigator.pop lorsque la boîte de dialogue est fermée.
Qu’est-ce que le dialogue en flutter ?
Comme nous le voyons dans l’image ci-dessus, lorsque le widget SimpleDialog apparaît, le contenu ci-dessous est grisé. Cela se produit à cause de la ModalBarrier. Et la fonction « showDialog() » crée le widget de boîte de dialogue à l’aide du constructeur.
Voyons maintenant le code. Tout d’abord, nous créons la classe “Writer” dans le dossier Model.
class Writer {
String name;
Writer(this.name);
}Ensuite, nous avons besoin d’un StatefulWidget personnalisé car le widget de dialogue doit être mis à jour de manière dynamique.
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;
})
},
);
}
}
Dans le premier cas, nous avons enveloppé le Widget SimpleDialog avec un autre Widget Simple Dialog.
Si nous enveloppons le widget de dialogue simple avec un widget ListView, cela peut également nous aider à faire défiler.
En conséquence, le look change.
Pour l’extrait de code complet, veuillez visiter le référentiel GitHub.
Leave a Reply