Utilizzare le SnackBar in Flutter

Il componente SnackBar di Flutter ci permette di avvisare l'utente con un messaggio non troppo intrusivo.

In verità, oltre ad un semplice messaggio, possiamo fare molto di più.

In questo articolo vediamo qualche esempio su come usarlo; non mostrerò il codice di tutta la schermata, ma solo il bottone da cui parte l'azione scatenante.

Cominciamo con l'esempio pià basico:

IconButton(
  icon: const Icon(Icons.delete),
  color: Theme.of(context).errorColor,
  onPressed: () => {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: const Text(
          "CANCELLATO!",
        ),
      ),
    ),
  },
),

Volendo possiamo decidere la durata (in ore, giorni, minuti, ecc):

IconButton(
  icon: const Icon(Icons.delete),
  color: Theme.of(context).errorColor,
  onPressed: () => {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: const Text(
          "CANCELLATO!",
        ),
        duration: const Duration(seconds: 5),
      ),
    ),
  },
),

Visto che il testo è un componente Text, possiamo mettere alcune impostazioni, come l'allineamento:

IconButton(
  icon: const Icon(Icons.delete),
  color: Theme.of(context).errorColor,
  onPressed: () => {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: const Text(
          "CANCELLATO!",
          textAlign: TextAlign.center,
        ),
        duration: const Duration(seconds: 5),
      ),
    ),
  },
),

In più possiamo anche decidere di impostare un'azione sulla SnackBar, ad esempio in classico "Annulla":

IconButton(
  icon: const Icon(Icons.delete),
  color: Theme.of(context).errorColor,
  onPressed: () => {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: const Text(
          "CANCELLATO!",
        ),
        duration: const Duration(seconds: 5),
        action: SnackBarAction(
          label: "Annulla",
          onPressed: () {
            print("ANNULLATO");
          },
        ),
      ),
    ),
  },
),

Abbiamo usato SnackBarAction che richiede una label e un'azione da compiere.

Ovviamente possiamo anche usarlo con un Dismissible (ne abbiamo parlato in questo articolo):

onDismissed: (direction) {
  if (direction == DismissDirection.endToStart) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: const Text(
          "CANCELLATO!",
        ),
        duration: const Duration(seconds: 5),
        action: SnackBarAction(
          label: "Annulla",
          onPressed: () {
            print("ANNULLATO");
          },
        ),
      ),
    );
  }

  if (direction == DismissDirection.startToEnd) {
    print('ALTRA AZIONE');
  }
},

Enjoy!