Back

Le widget SnackBar dans Flutter

Le widget SnackBar dans Flutter

  1. Objectif

    • Apprenez à créer des widgets SnackBar statiques et personnalisés dans vos applications flutter
  2. Présentation

    • Le widget SnackBar dans Flutter

    • 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.



  3. 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')
        );
      
  4. Afficher un SnackBar

    • Il y a deux étapes pour afficher un SnackBar.
      1. 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')
          );
        
      2. 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.
        • 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.

  5. Personnaliser un SnackBar

    1. 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),
        
    2. 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;
          }

        Le widget SnackBar dans Flutter




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

        Le widget SnackBar dans Flutter

    4. 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(
        

        Le widget SnackBar dans Flutter

      • 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.



    5. 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é.
    6. 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),
        



Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement