Le widget SnackBar dans Flutter
Sommaire
- 1- Objectif
- 2- Présentation
- 3- Les propriétés SnackBar
- 4- Afficher un
SnackBar
- 5- Personnaliser un
SnackBar
- 5.1- Définir la couleur d'arrière-plan d'un
SnackBar
- 5.2- Définir le rembourrage ("padding") d'un
SnackBar
- 5.3- Définir la forme (Shape) d'un
SnackBar
- 5.4- Définir le comportement, la largeur et la marge d'un
SnackBar
- 5.5- Définir l'action d'un
SnackBar
- 5.6- Définir une durée pour le
SnackBar
- 5.6.1- Cours Flutter
Le widget SnackBar dans Flutter
-
Objectif
- Apprenez à créer des widgets SnackBar statiques et personnalisés dans vos applications flutter
-
Présentation
- Dans Flutter, le
SnackBar
est un widget qui affiche un message rapide dans votre application qui indique brièvement à l’utilisateur quand quelque chose s’est passé. - À l’aide d’un
SnackBar
, vous faites apparaître un message pendant quelques secondes au bas de votre application. - Par défaut, le
snackbar
s’affiche en bas de l’écran, et lorsque l’heure spécifiée est terminée, il disparaîtra de l’écran - Nous pouvons également créer un snackbar personnalisé et il contient des actions qui permettent à l’utilisateur d’ajouter ou supprimer toute action et images.
- Le widget
SnackBar
nécessite un Scaffold, avec une instance Scaffold et votre SnackBar apparaîtra instantanément. -
Les propriétés SnackBar
- Le seul paramètre requis est le contenu qui est le widget à afficher à l’intérieur du snack. Dans la plupart des cas, le widget est un widget Texte, mais vous pouvez également utiliser d’autres types de widget Flutter.
-
Afficher un
SnackBar
- Il y a deux étapes pour afficher un
SnackBar
. - La première étape consiste à créer un
SnackBar
qui peut être fait en appelant les constructeurs présentés précédemment.final _snackBar = SnackBar( content: Text('Bienvenue sur apcpedagogie.com') );
- La deuxième étape consiste à afficher le fichier
SnackBar
.- Un SnackBar n’est pas toujours affiché à l’écran. Il est généralement déclenché par certains événements tels qu’un clic sur un bouton.
- Pour afficher un SnackBar, utilisez
ScaffoldMessengerState
la méthode deshowSnackBar
. - Pour obtenir le
ScaffoldMessengerState
, vous pouvez utiliserScaffoldMessenger.of(BuildContext context)
. ScaffoldMessenger
lui-même est un widget utilisé pour gérer les SnackBars pour les descendants Scaffold.
ScaffoldMessenger.of(context).showSnackBar(_snackBar);
ScaffoldMessenger
a été introduit dans Flutter 2. La façon précédente de montrer a SnackBar est d’utiliser ScaffoldState.
Key? key
: La clé du widget, utilisée pour contrôler s’il doit être remplacé.@required Widget content
: Le contenu du fichier SnackBar.Color? backgroundColor
: La couleur d’arrière-plan du fichier SnackBar.double? elevation
: La coordonnée z de SnackBarqui affecte la taille de l’ombre.EdgeInsetsGeometry? margin
: Espace vide à l’extérieur du SnackBar.EdgeInsetsGeometry? padding
: Remplissage à appliquer au SnackBarcontenu et à l’action de .double? width
: La largeur du SnackBar.ShapeBorder? shape
: La forme SnackBardu Material.SnackBarBehavior? behavior
: Définit le comportement et l’emplacement du snack.SnackBarAction? action
: Une action que l’utilisateur peut effectuer en cliquant sur un bouton à l’intérieur du fichier SnackBar.Duration duration
: Combien de temps SnackBarest affiché. Par défaut à 4 secondes.Animation
VoidCallback? onVisible
: Une fonction de rappel appelée lorsque le SnackBardevient visible dans a Scaffoldpour la première fois.@required : la valeur doit être transmise
? : la valeur peut être nulle
final _snackBar = SnackBar(
content: Text('Bienvenue sur apcpedagogie.com')
);
Personnaliser un SnackBar
-
Définir la couleur d’arrière-plan d’un
SnackBar
- Vous pouvez définir la couleur d’arrière-plan d’un SnackBar en passant la propriété backgroundColor.
- Si vous ne passez pas le paramètre, il utilisera backgroundColor du
ThemeData.snackBarTheme
. - Si cette valeur n’est pas non plus spécifiée, il utilisera une variation sombre
ColorScheme.surface
dans les thèmes clairs ouColorScheme.onSurface
dans les thèmes sombres. -
Définir le rembourrage (“padding”) d’un
SnackBar
- Pour définir le rembourrage (“padding”) du contenu et de l’action du Snackbar, vous pouvez passer le paramètre padding (
EdgeInsetsGeometry
). - Sans passer ce paramètre, le remplissage par défaut dépend de behavior et action. Si behavior est fixed, le rembourrage de début est 24.
- Si behavior est floating, le rembourrage de début est 16. La même quantité de rembourrage sera ajoutée à la fin s’il n’y a pas de action.
-
Définir la forme (Shape) d’un
SnackBar
- Vous pouvez changer la forme d’un
SnackBar
en passant un paramètre BorderShape. - Sans le paramètre BorderShape, il utilisera shape de ThemeData.snackBarTheme.
- Si les données du thème n’ont pas cette valeur, cela dépend du fichier SnackBarBehavior.
- Si le comportement est fixed, la forme par défaut est rectangulaire.
- Si le comportement est floating, il utilise un RoundedRectangleBorder avec un rayon de 4.0.
-
Définir le comportement, la largeur et la marge d’un
SnackBar
- Vous pouvez définir comment le SnackBar doit apparaître dans un Scaffold en définissant la valeur de
behavior
dont le type est SnackBarBehavior avec deux valeurs : fixed et floating. - Si la valeur de behavior est fixed, le BorderShape est fixé en bas de Scaffold.
- La présence du snack-bar entraîne d’autres widgets non fixes tels qu’à FloatingActionButtonêtre poussés dessus. Il existe une exception lorsque le Scaffolda un BottomNavigationBar, le snack-bar sera affiché au-dessus du BottomNavigationBar.
- Si vous ne passez pas ce paramètre, behaviorof ThemeData.snackBarThemeest utilisé. Si cette valeur est également nulle, elle utilisera le comportement fixed .
- Vous pouvez utiliser
margin: EdgeInsets.all(30.0),
width
etmargin
ne peut être défini que sibehavior
est défini surfloating
.- Mais vous ne pouvez pas définir les deux width et margin car la définition des deux propriétés provoque une erreur d’assertion.
-
Définir l’action d’un
SnackBar
- Vous pouvez 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 deSnackBar
. - La création d’un
SnackBarAction
peut être effectuée en appelant son constructeur qui a les paramètres nommés suivants. Key key
: La clé du widget, utilisée pour contrôler s’il doit être remplacé.Color textColor
: La couleur du texte.Color disabledTextColor
: La couleur du texte lorsqu’il est désactivé.String label*
: L’étiquette du bouton.VoidCallback onPressed*
: Le rappel à appeler lorsque le bouton est enfoncé.-
Définir une durée pour le
SnackBar
- Par défaut, un SnackBar est affiché pendant 4 secondes. Pour modifier la durée d’affichage du SnackBar, vous pouvez définir un paramètre
Duration
content: const Text('Bienvenu sur notre site apcpedagogie.com'),
backgroundColor: const Color.fromARGB(255, 80, 187, 176),
SnackBar _createSnackBar() {
var snackbar = SnackBar(
content: const Text('Bienvenu sur notre site apcpedagogie.com'),
backgroundColor: const Color.fromARGB(255, 80, 187, 176),
padding: const EdgeInsets.all(15.0),
action: SnackBarAction(
label: 'Supprimer',
onPressed: () {},
),
);
return snackbar;
}
content: const Text('Bienvenu sur notre site apcpedagogie.com'),
backgroundColor: const Color.fromARGB(255, 80, 187, 176),
padding: const EdgeInsets.all(15.0),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20))),
.............
borderRadius: BorderRadius.all(Radius.circular(20))),
behavior: SnackBarBehavior.floating,
width: 300,
action: SnackBarAction(
.............
duration: const Duration(seconds: 10),