Pop-up et SnackBar

dans Flutter

2
 Row et Column

• Dans Flutter, le SnackBar est

un widget qui affiche un
message rapide en bas de
l’application qui indique
brièvement à l’utilisateur
quand quelque chose s’est
passé.
• Le widget SnackBar nécessite
un Scaffold

3
 import 'package:flutter/material.dart';
void main() {
Créer un runApp(MyApp());
}
nouveau projet class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);}}
class HomePage extends StatelessWidget {
// Créer une Fonction pour afficher le SnackBar personnalisé
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SnackBar Personnalisé'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// Appeler la fonction pour afficher le SnackBar
},
child: Text('Afficher SnackBar'),
4
),),); }}
 Etapes de création d’un SnackBar

1. Créer une Fonction showCustomSnackBar pour afficher le SnackBar

personnalisé;
2. Pour afficher un SnackBar, utilisez ScaffoldMessengerState la méthode
de showSnackBar
• ScaffoldMessenger est un widget utilisé pour gérer les SnackBars pour les
descendants Scaffold.
• Pour obtenir le ScaffoldMessengerState, vous pouvez
utiliser ScaffoldMessenger.of(BuildContext context).

void showCustomSnackBar(BuildContext context) {

ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text("Ceci est un SnackBar personnalisé."),
),
); 5
}
 Etapes de création d’un SnackBar

3. Appeler la fonction dans ElevatedButton

ElevatedButton(
onPressed: () {
showCustomSnackBar(context);
// Appeler la fonction pour afficher le SnackBar },
child: Text('Afficher SnackBar'), ),

6
 Etapes de création d’un SnackBar

• Définir la couleur d’arrière-plan d’un SnackBar

backgroundColor: Colors.green,

• Définir le rembourrage (« padding »), utiliser le paramètre EdgeInsets

padding: const EdgeInsets.all(15.0),
• Définir la forme (Shape)
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20))),
• Définir une durée
duration: const Duration(seconds: 10), 7
 Etapes de création d’un SnackBar

• Définir l’action
• On peut ajouter un bouton cliquable à l’intérieur du snack-bar avec l’action
lorsque le bouton est cliqué.
• Pour ce faire, vous devez créer un SnackBarAction et le transmettre
comme action dans le constructeur de SnackBar.
• Paramètres : action: SnackBarAction(
•Color textColor: La couleur du texte. // Action du SnackBar
•Color disabledTextColor: La couleur du label: 'Action',
texte lorsqu’il est désactivé. onPressed: () {
•String label* : L’étiquette du bouton. print("Action du SnackBar !");
•VoidCallback onPressed* : Le rappel à },
textColor: Colors.red,
appeler lorsque le bouton est enfoncé. 8
),
AlertDialog
dans Flutter

9
 Boîte de dialogue d’alerte de base

• Étapes
• Ajouter un
ElevatedButton/ TextButton, dans la méthode
onPressed:(){} créer la méthode showDialog() qui contient :
• le contexte :
• context: context,
• Pour forcer l’utilisateur à interagir avec la fenêtre d’information, la
propriété barrierDismissible est passée à false:
• barrierDismissible: false,

10
 Boîte de dialogue d’alerte de base

• Étapes
• la méthode showDialog() contient aussi:
• Le builder retourne une instance d’AlertDialog qui possède un titre
(title), un contenu (content) et un comportement (actions):
builder: (BuildContext context) {
return AlertDialog( Le dialogue pop-up possédant déjà
title: const Text('Information'), un TextButton.
content: const Text("Ceci est un Ce bouton appelle, via onPressed, la
message d'AlertDialog"), méthode Navigator.of(context) .pop().
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop(); 11
},
 Boîte de dialogue d’alerte de
confirmation
Pour obtenir la confirmation des utilisateurs dans AlertDialog, on ajoute dans
actions de builder deux TextButton : un pour confirmer et un pour annuler
•Exemple:
• L’application comporte un bouton et
une boîte bleu.
• Lorsque vous appuyez sur le bouton, une
boîte de dialogue de confirmation s’affiche.
• Si l’utilisateur sélectionne « Oui » , la
boîte sera supprimée puis la boîte de
dialogue disparaîtra. Le bouton devient
alors désactivé. 12

• Si l’utilisateur sélectionne « Non » , la

boîte de dialogue se ferme et rien d’autre
ne se passe.
To be continued …

13