Le widget SnackBar dans Flutter

SnackBar au sein du Scaffold est désormais gérée par le ScaffoldMessenger, dont l’une est disponible par défaut dans le contexte d’un MaterialApp.

Scaffold(
  key: scaffoldKey,
  body: GestureDetector(
    onTap: () {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: const Text('snack'),
        duration: const Duration(seconds: 1),
        action: SnackBarAction(
          label: 'ACTION',
          onPressed: () { },
        ),
      ));
    },
    child: const Text('SHOW SNACK'),
  ),
);

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<double>? 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

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

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.

• Objectif : Créez une application Flutter qui affiche un SnackBar personnalisé avec des options de personnalisation.
• Instructions :
• 1- Configuration de base
• Créez un nouveau projet Flutter.
• Dans la page d’accueil de l’application, ajoutez un bouton. Lorsque ce bouton est appuyé, le SnackBar sera affiché.
• Ajoutez un Scaffold à la page et définissez l’appBar avec un titre approprié.
• 2- Personnalisation du SnackBar
• À l’intérieur du Scaffold, créez une fonction pour afficher le SnackBar personnalisé lorsqu’on appuie sur le bouton. Cette fonction devrait contenir le code pour créer et afficher le SnackBar.
• Remplacez le texte du SnackBar par : »Ceci est un SnackBar personnalisé.« 
• Définissez la couleur d’arrière-plan du SnackBar en vert ici */, // Couleur d’arrière-plan du SnackBar
• Définissez le rembourrage du SnackBar de manière à ce qu’il soit uniforme de 16.0 pixels de tous les côtés. ici */, // Rembourrage du SnackBar
• Définissez la forme du SnackBar en utilisant un bord arrondi avec un rayon de 10.0. ici */, // Forme du SnackBar
• Définissez le comportement du SnackBar pour qu’il soit flottant. ici */, // Comportement du SnackBar
• Définissez la largeur du SnackBar à 300 pixels. ici */, // Largeur du SnackBar
• Définissez la marge du SnackBar avec 20.0 pixels de tous les côtés. ici */, // Marge du SnackBar
• Définissez le texte du bouton d’action comme « Action ». ici */, // Étiquette du bouton d’action
• 3- Logique de l’action
• Ajoutez la logique de l’action lorsque le bouton est pressé. Vous pouvez ajouter un message de débogage par exemple.
• 4- Durée d’affichage
• Définissez la durée d’affichage du SnackBar à 5 secondes. ici */, // Durée pendant laquelle le SnackBar est affiché
• 5- Affichage du SnackBar
• Associez la fonction showCustomSnackBar au bouton que vous avez ajouté dans l’étape 1. Cela signifie que lorsque vous appuyez sur le bouton, le SnackBar personnalisé sera affiché.

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

• 6- Testez votre application Flutter
• Exécutez votre application Flutter. Lorsque vous appuyez sur le bouton « Afficher SnackBar », le SnackBar personnalisé apparaîtra avec les options de personnalisation que vous avez définies.
• Vous pouvez personnaliser davantage le SnackBar en ajustant les valeurs de couleur, de rembourrage, de forme, de comportement, de largeur, de marge, d’action et de durée selon vos besoins.
Code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  // Fonction pour afficher le SnackBar personnalisé
  void showCustomSnackBar(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text("Ceci est un SnackBar personnalisé."),
        backgroundColor: Colors.green, // Couleur d’arrière-plan du SnackBar
        padding: EdgeInsets.all(16.0), // Rembourrage du SnackBar
        shape: RoundedRectangleBorder( // Forme du SnackBar
          borderRadius: BorderRadius.circular(10.0),
        ),
        behavior: SnackBarBehavior.floating, // Comportement du SnackBar
        margin: EdgeInsets.all(20.0), // Marge du SnackBar
        action: SnackBarAction( // Action du SnackBar
          label: 'Action',
          onPressed: () {
            // Logique de l'action lorsque le bouton est pressé
            print("Action du SnackBar !");
          },
           textColor: Colors.red, // Couleur du texte de l'action (rouge)
        ),
        duration: Duration(seconds: 5), // Durée d'affichage du SnackBar
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SnackBar Personnalisé'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showCustomSnackBar(context); // Appeler la fonction pour afficher le SnackBar
          },
          child: Text('Afficher SnackBar'),
        ),
      ),
    );
  }
}