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

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? animation: Définit les animations d’entrée et de sortie du SnackBar.
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

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.


final _snackBar = SnackBar(
    content: Text('Bienvenue sur apcpedagogie.com')
  );

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 de showSnackBar.
- Pour obtenir le ScaffoldMessengerState, vous pouvez utiliser ScaffoldMessenger.of(BuildContext context).
- ScaffoldMessenger lui-même est un widget utilisé pour gérer les SnackBars pour les descendants Scaffold.

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 ou ColorScheme.onSurface dans les thèmes sombres.

content: const Text('Bienvenu sur notre site apcpedagogie.com'),
      backgroundColor: const Color.fromARGB(255, 80, 187, 176),

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.

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;
  }

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.

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))),

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 .

.............
      borderRadius: BorderRadius.all(Radius.circular(20))),
      behavior: SnackBarBehavior.floating,
      width: 300,
      action: SnackBarAction(

Vous pouvez utiliser margin: EdgeInsets.all(30.0),
width et margin ne peut être défini que si behavior est défini sur floating.
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 de SnackBar.
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

.............
      duration: const Duration(seconds: 10),

Les cours

Les cours

Flutter

Le widget SnackBar dans Flutter